Namo WebEditor 5 Online Help

Welcome to Namo WebEditor 5 online help

Namo WebEditor's online help system has been designed to help you with practically every aspect of using Namo WebEditor. For help on using online help, refer to Using online help.

Namo Interactive home page

For the latest information, including tips and tutorials to help you get the most out of Namo WebEditor 5, please visit Namo Interactive's home page on the Web.

Getting technical support

Customer support, including technical support, for Namo WebEditor is generally provided by the master distributor of Namo Interactive's products in your country or region of the world. For a current list of master distributors, please visit our regional support contacts page on the Web at http://www.namo.com/company/contact/.

Support links and contact info

  • Customer Support
  • Online customer registration
  • Troubleshooting guide
  • Technical support e-mail address
  • Technical support fax number: 953-930-9172

Copyright information

The copyright and intellectual property rights of this software all its documentation, including this online help system, are owned by Namo Interactive Inc. and are protected by the copyright laws of the Republic of Korea and international intellectual property right treaties. You may not copy any portion of the software or documentation in any form, except to use this software in accordance with the terms of this agreement or to make one copy for backup purposes. You may not alter the software in any way. If copies of the documentation must be made, you should make them in printed form only.

top


Using online help

Namo WebEditor 5 online help

Accessing help

Searching help

Searching for a topic in the Contents tab

Namo WebEditor 5 online help

Namo WebEditor 5 online help is composed of ordinary HTML documents, like the ones you create using Namo WebEditor--in fact, the help pages were authored in Namo WebEditor. Thus, most of the help pages contain hyperlinks to other, related pages or even to related documents on the Web. The help window consists of two main parts. The pane on the right shows the current help document. The pane on the left has four tabs: Contents, Index, Search, and Favorites. In addition, there are six button at the top of the window. Each of these tabs is explained below.

  • Contents tab
    This tab displays a list of all the documents in the online help system, organized into topics and subtopics. Topics and subtopics are represented by a book-shaped icon ( [image]). To expand a topic or subtopic, click the small plus sign ( [image]) to the left of the icon or double-click the name. Individual help documents within a topic are represented by a document-shaped icon with a question mark ( [image]). To view an individual help document, click the document's name.     You can also expand or collapse all topics and subtopics by right-clicking inside the Contents tab and selecting Open all or Close all in the shortcut menu.
  • Index tab
    This tab shows a list of important keywords used in the help documents. The index is just like an index in a book, except that double-clicking an index item will open the page containing the keyword. You can search the index by entering one or more words in the     Type in the keyword(s) to find text box above the keyword list and pressing <Enter>. To display the help page that contains a keyword, double-click the keyword or click Display at the bottom of the window. If more than one page contains the chosen keyword, the Topics Found dialog box will appear, listing all the pages containing the keyword and letting you choose which one to view.
  • Search tab
    This tab lets you search for the help information you need by entering one or more words and finding the help pages that contain the word or words. To search, just enter your search term(s) in the     Type in the word(s) to search for text box at the top of the tab and press <Enter> or click List Topics. A list of all the help pages that contain all of the search terms you entered will be shown. Double-click a help topic to open the page. Each found search term in the page will be highlighted.
    To search documents containing a multi-word phrase, enter the phrase with double quotation mark(" ") in the Type in the word(s) to search for text box. For example, if you want to find contents on HTML Clean up, enter "HTML Formatting Options" in the text box and press <Enter>.
  • Favorites tab
    This tab lets you keep shortcuts to your favorite     help pages so that you can more easily find and view them again. To add the current page to the favorites list, switch to this tab while viewing the page and click Add. Later, you can get back to the page quickly by switching to the Favorites tab and double-clicking the shortcut. You can delete an item by clicking Remove.

To increase or decrease the font size in the Help window, scroll the mouse-wheel up or down while holding down the <Ctrl> key.

Accessing help

If you're reading this, you already know at least one way to access the online help system. The online help system can be accessed in one of three ways.
  • Accessing help from the Help menu opens the help system at the first page. To see Namo WebEditor 5 Help, without any selected topic, select the [Help > Namo WebEditor Help] menu command.
  • While you are viewing a dialog box, if the dialog box has a Help button, clicking it opens the help system at the page relevant to the dialog box or tab that you are viewing.
  • Pressing the <F1> key at any time opens the help system at the page relevant to the dialog box or tab that you are viewing, or at the first page if you are viewing the Edit window.

Searching help

  1. Select one of the following methods.
    • To search Help by its topics, click the Contents tab.
    • To search words or phrases in Help documents, click the Search tab and enter the words or phrases you want to find.
  2. Select the document title you want to read in the Contents or Search tab and the selected document appears in the right pane.

You can search the help information faster and easier by using the Search tab. For more accurate search result, connect the words with AND, OR, NEAR or NOT.

  • AND
    If you enter 'Chart' AND 'Database', Help searches for documents containing both 'Chart' and 'Database'.
  • OR
    If you enter 'Chart' OR 'Database', Help searches for documents containing just one of the two words or both of the two words.
  • NEAR
    If you enter 'Chart' NEAR 'Database', Help searches for documents where 'Chart' and 'Database' are adjacent.
  • NOT
    If you enter 'Chart' NOT 'Database', Help searches for documents containing just 'Chart' and not 'Database'.

Searching for a topic in the Contents tab

Namo WebEditor 5 presents Overview, Instruction, and Dialog Box documents on each feature. Overview introduces the outline of the feature, How to... presents the concrete examples on a step-by-step basis, and Dialog Boxes gives short and clear explanation on different items constituting each dialog box.

Clicking the See Also button at the bottom of help document opens a pop-up menu, which guides you to other help documents related to the current document.

top


Opening help in the dialog boxes

To see Help, press the <F1> key in the dialog box.

If you press the <F1> key in any dialog box, the Help window opens displaying the help document related to the current dialog box. If the Help window does not appear at one stroke of the <F1> key, press it once more.

If the dialog box contains a Help button, click it.

Click the Help button or press the <F1> key. If the Help window does not appear at one stroke of the <F1> key, press it once more.


Copying help documents

You can copy and paste specific contents of help documents.

  1. Select the contents you want to copy by dragging in the right pane. To select all the contents in the current document, select {Select All} in the shortcut menu or press the shortcut key <Ctrl + A>.
  2. Select {Copy} in the shortcut menu or press the shortcut key <Ctrl + C>.
  3. Place the cursor where you want to paste the copied contents in the document.
  4. Select the [Edit > Paste] menu command or press the shortcut key <Ctrl + V>.


Printing help documents

You can print a document in help.

  1. Select a help document you want to print.
  2. Click [Options > Print...] in the help Toolbar or click the Print button.
  3. In the Print Topics dialog box, choose one from the following and click OK.
    • Selecting Print the Selected Topic lets you print out the document that is currently selected.
    • Selecting Print the selected heading and all subtopics lets you print the current document and all the documents included in it.


Inspector

The Inspector displays the properties of an object, such as image, layer, horizontal line, table, etc., selected in the Edit window. You can modify the properties of a selected object using the Inspector, without opening any dialog box. You can use the Inspector while it is floating or while it is docked to the right or left of the window.

Elements of the Inspector

The Inspector can be divided into three large sections - title, property information, and a group of related buttons on the toolbar.

  • Title
    Displays the object that is currently selected. Clicking the arrow at the head of the title bar lets you move to an element in the higher or lower hierarchy.
  • Property Information
    Makes up the large part of the Inspector. It contains the items in the related property dialog box.
  • Related buttons
    Displays the commonly used icons related to the currently selected object.

Types of Inspector

Shows the information on an object where the mouse cursor is currently placed.

  • Document Inspector
    Displayed as default when a document is opened.
  • Image Inspector
    Select an image in the Edit window to display the properties of the selected image in the Image Inspector.
  • Table Inspector (Table, Cell, Row tab)
    Placing the cursor in a table lets you see types of information - table, cell, and row in the Table Inspector.
  • Layer Inspector
    Selecting or placing the mouse pointer in a layer activates the Layer Inspector.
  • HR Inspector
    Selecting a horizontal line in the Edit window activates the HR Inspector.

Application of properties

You can apply properties to an object by specifying the relevant values directly or using the increase/decrease button. After specifying the properties, press <Enter> or move on to the other items to apply the properties.

(Example of switching the inspector type in the Table Inspector after a table in a document is selected.)

top


Resource Manager

Resources are elements that constitute a Web document, such as document templates, images, Smart Buttons, Clip Arts, etc. Namo WebEditor 5 offers the Resource Manager for you to manage and use various resources in one location. Resources that can be managed in the Resource Manager are as follows.

  • Component
  • Clip Art
  • Color Set
  • Smart Button
  • Flash Button
  • Theme
  • Table Style
  • All
    Shows all the resources located in each tab of the Resource Manager.

You can customize a new folder, other than the ones offered by the Resource Manager to gather and manage the resources you need. You can also distribute a set of resources to others, which makes it possible for several people to collaborate on a project.


Layout Tables

A Layout Table is an area where you can insert layout cells and place them as you wish simply by dragging. You can create a fine-tuned document layout using layout tables. There are grids, the horizontal/vertical lines to help you arrange various objects, in a layout table, and you can fit layout cells to these grids.

Layout cells can be inserted only in a layout table. Anything that can be inserted in a cell, text, images, and tables, for example, can also be inserted into a layout cell. You can specify layout table/cell properties including border, margin, and so on.

You can see in the HTML tab that a layout table is made up of an ordinary table. Therefore, you can convert a layout table to an ordinary table and vice versa. When the conversion is made, a layout table is converted to a table; a layout cell to a cell.

Example of the text inserted in layout cells inside a layout table:

Example of an image inserted in a layout cell inside a layout table:


Table Style

Tables are used to display data or to create a consistent layout within a Web document. You can modify the table properties, such as background color, border, etc.

Namo WebEditor 5 offers Table Styles. They are pre-designed, various types of tables with different table properties. You can rapidly modify properties of a table using the table styles offered in the Table Styles tab of the Resource Manager. You can modify the table, cell, or row properties using the Table Inspector even after you have applied a table style.


Hyperlink Toolbar

A hyperlink connects one document with another and is the principal element of a Web document. You can apply hyperlinks to text or images in a Web document with a few clicks.

Namo WebEditor 5 lets you create a hyperlink and specify a Bookmark and Target Frame using the Hyperlink Toolbar, without interfacing any dialog box. You can also confirm the hyperlink information or modify its properties.

To display the Hyperlink Toolbar, select the [View > Toolbar > Hyperlink] menu command.

  • Hyperlink
    Select the desired URL from the drop-down menu or enter a URL. The drop-down menu shows all the URLs specified in the current Web document.
  • Bookmark
    Select a bookmark name you want from the drop-down menu. The drop-down menu shows all the bookmarks specified in the current Web document.
  • Target frame
    Specify the target frame from the drop-down menu.
    • _blank | The specified document will be loaded in a new window.
_parent | The specified document will be loaded in the parent frame.
_self | The specified document will be loaded in the same frame as the current opened document.
_top | The specified document will be loaded in the entire window including the frame containing the current document.
  • Select [image] to open the Create Hyperlink/Hyperlink Properties dialog box.
  • Select [image] to remove hyperlinks.


Layout Toolbar

You can modify the size and alignment of layers or layout cells inserted in a layout table using the Layout Toolbar. If you have selected multiple layers or layout cells, the criterion of alignment or resizing is the one last selected. To display the Layer Toolbar, select the [View > Toolbar > Layout] menu command or use the buttons in the Layer Inspector. Buttons on the Layout Toolbar are activated only when you have selected more than two layers or layout cells.

See also


Color Set

Often, collaborators work on a guideline to use a set of colors to maintain consistency or to create a unified atmosphere of a Web site. By using the Color Set tab in the Resource Manager, you can specify frequently used colors and manage them with ease. Colors defined in the Color Set can also be sent to other people, which make it possible for several people to collaborate on a project with a defined set of colors. Colors defined in the Color Set tab can be applied to the Color Picker Pop-up icon in the Inspector simply by the drag and drop method.


Flash Buttons

Namo WebEditor 5 lets you insert various Flash Buttons without any specific knowledge about Flash animation. You can insert built-in buttons offered by Namo WebEditor or you can insert buttons you have created on your own and/or edit Flash Buttons in the Flash Button Properties dialog box. You can insert and edit 2 byte languages, such as Korean, Chinese, or Japanese within Flash Buttons.


HTML source clean-up and validation

There are two methods to creating Web documents using Namo WebEditor. One is to edit a document in the Edit window based on the WYSIWYG mode. The other is to code HTML tags directly in the HTML tab. In the latter situation, it is easy to make mistakes, such as not closing a tag, or repeating redundant tags.

Namo WebEditor 5 offers HTML source clean-up and validation features to resolve the mistakes made when users code HTML tags directly in the HTML tab.

HTML source clean-up

When you import MS Office documents, or Web documents created by other people or with other Web authoring tools, unnecessary tags are imported along with the documents. Namo WebEditor offers the Clean Up HTML feature to remove these unnecessary HTML tags.

Verifying HTML sources

Namo WebEditor offers the Verify HTML feature so that you can check whether the current Web document contains HTML tags compatible with the user-specified HTML version, and whether there are any browser-specific tags. You can create Web documents that will be displayed properly in any browser using the Verify HTML feature.

See also


HTML Source Editing

Namo WebEditor 5 offers an advanced, user-friendly HTML-editing environment.

  • Namo WebEditor 5 perfectly maintains HTML tags and lets users specify different colors for each tag, making it easy for users to distinguish one tag element from another.
  • Namo WebEditor automatically changes lines, which makes it unnecessary for users to check HTML sources using the horizontal scroll bar.


Clip Art

To support the creation of high-quality Web sites, authentic photograph images have been added. Namo WebEditor 5 has integrated all the Clip Art samples in the Clip Art tab of the Resource Manager. You can also preview the Clip Art files according to their file format (All / GIF / JPG).


Actions and Script Wizard

Approximately 70 actions, which apply JavaScript effects to layers, have been added in this version. The 'Action' button, which was located in each dialog box in the previous version, has been removed. Instead, all the actions can be specified in the Action window. Also, the Script Wizard offers many more types of scripts.


Color Picker Pop-up

The palette, which contains 16 colors and user-defined custom colors, has been replaced by the Color Picker Pop-up, where you can specify the color you want without using the Color Picker dialog box. The Color Picker Pop-up offers 216 Web-safe colors. Web-safe colors refer to the colors which are always displayed the same irrespective of operating systems or Web browsers. 24 bit True Colors (colors other than 216 Web-safe colors) can be specified by opening the Color Picker dialog box by clicking [image]. You can also choose a color in the Edit window and apply it to other elements using the dropper [image]. The Color Picker Pop-up contains and displays recent colors you have applied, as well as user-defined custom colors. Moreover, in case you select text, hyperlink, or document background color, its default color is also displayed for your convenience.


Database Wizard

Namo WebEditor 5 now supports JSP, a Java-based server-side script, as well as ASP and PHP. You can create database-enabled Web documents with a few clicks, which can access, add, and modify data on the database server without extra effort or Web programming for the database system.


Image Effects

The Image Effects dialog box, which consisted of multiple tabs in Namo WebEditor 4, has been converted to the Image Effects window, containing various Image Effect buttons. You can crop or resize images as well as apply various image effects.

  • Cropping images
    You can remove unnecessary parts of an image by using Crop [image] . You can apply feathering effects to the cropped border using the Feather [image] function.
  • Resizing Images
    You can resize an image. You can modify the size of an image by entering precise Width/Height values.
  • Modifying image properties
    You can modify the Brightness, Contrast, and Sharpness of an image.
  • Flipping and rotating images
    Images can be rotated by 90/180/270 degrees or flip an image vertically or horizontally.
  • Others
    Various effects can be applied to image borders.


Navigation Bars

Navigation Tree

You can easily create a tree-shaped navigation bar, which folds and unfolds when clicked. You can create a menu which clearly summarizes a Web site containing numerous documents and complex structure using the Navigation Tree. As the structure of a site is modified, the links of the navigation tree are updated automatically.

Pop-up menu

You can create a pop-up menu to appear when you place the mouse pointer over the navigation bar. As the structure of a site is modified, the link list and hyperlinks of the navigation tree are updated automatically. Therefore, you do not need to update the menu manually.

Showing the submenu

You can create sub-menus to appear along with top menus.

Specifying target frame

You can specify the target frame to a navigation bar.

Navigation Bar made up of Flash Buttons

You can use Flash Buttons on a navigation bar. Text and links applied to a button are automatically created and modified by WebEditor.

See also


Photo Album

Photo Album is a photograph management tool with enhanced features of Namo WebEditor 4's Image Gallery.

  • Photo Album creates thumbnails of the photos taken by digital cameras or scanned images and connects them with the original images.
  • Photo Album automatically creates a Web document containing the original image linked to a thumbnail image.
  • Photo Album offers various types of photo albums. You can apply special effects, such as frame effect, slide holder effect, etc., to thumbnail images.
  • You can specify the desired size of thumbnails.


Site Manager

You can manage a site by checking both the Local window, where you can view the file list constituting a Site, and the Navigation window, where you can preview the structure of a Web site. The Report tab lets you easily check the information on various resources and broken links. In the Publish tab, you can publish a site while checking the structure of the local and remote site.

  • Navigation View
    You can check the structure of a site in a graphical view. You can also edit the site structure by the drag-and-drop method.
  • Verifying Hyperlinks
    You can check the broken links by using the Verify Hyperlinks function.
  • Easy Publishing
    You can choose and publish only the modified files.
  • Intelligent file management
    If you reposition a file within a site, Namo WebEditor automatically modifies the link path of the document. This relieves you of the task of modifying the link paths manually.
  • Easy Update
    You can apply various themes uniformly to all the documents in a site. Accordingly, you can dramatically change the atmosphere of a site by applying a different theme.
  • Navigation Bar
    A navigation bar is automatically created according to the site structure.


Site Wizard

Modifying the site structure

You can modify the site structure during the steps of the Site Wizard. You can rename a menu, insert a new document, or relocate a document.

Publish information

You can set the FTP server information in advance and publish a Web site with just simple click. If the FTP server or account are not prepared, you can skip this step. You can set the information later when you have acquired the FTP server and account in the Remote Site Settings dialog box.

Namo WebEditor 4's Site Wizard (4 steps)

Namo WebEditor 5's Site Wizard (5 steps)


Smart Buttons

Namo WebEditor 5 offers various types of Smart Button samples, such as decorated text, banner, background, buttons, etc. You can apply various additional effects to an object used as a Smart Button. For instance, you can create a rollover effect using the Smart Button. (JavaScript is automatically created.) Smart Buttons can be saved as JPG, PNG format as well as GIF format and you can also specify the filename and folder where the Smart Button is saved.


Editing Tables

Namo WebEditor 5 offers the following new features for editing tables.

Transposing rows and columns

Transposes rows and columns.

Before transposing

After transposing

Cell size pop-up

As you drag the border of a cell, the cell size is displayed in a pop-up description. It displays the size of a cell, whose right border is being dragged, in pixels.

Integrated table editing

The Table Inspector contains the Table, Cell, and Row tab, which enables you to modify the respective properties in one location.

Row (tr) properties

You can modify table row properties by selecting a row/rows and specifying relevant values in the Row tab of the Table Inspector or the Table Properties dialog box.

top


Themes

Navigation bars and themes are separated in Namo WebEditor 5, which lets you apply navigation bars without having to apply themes to the Web documents. It has also become possible to edit and save themes by integrating the ThemeEditor feature to WebEditor 5.


Time Lines

Namo WebEditor 5 has improved the features of Namo WebEditor 4's Time Line. Namo WebEditor 5 lets you work with Time Lines using the keyboard as well as the mouse.


Setting the status bar

The status bar below the Edit window displays information relevant to the current situation.

Information shown in the status bar

  • Shows if there're any modified contents that haven't been saved yet. It's shown 'Modified' if there are, and it disappears when saved.
  • Shows whether the editing mode is 'Insert' or 'Modify'.
  • Shows if the document is 'Read only'. Does not show anything if it isn't.
  • If you selected the [View > Page Layout] menu command, the current page of the document is shown.

  • Shows the HTML tag of the selected object. For example, if you select an image, '<img>' will be displayed in the Status bar.
  • Explanation of the selected menu is written in the left side of the Status bar.

Hiding Status bar

  1. Remove the Status bar by selecting the [View > Toolbars > Status Bar] menu command.
  2. Status bar will disappear.(Select the [View > Toolbars > Status Bar] menu command once again to make the status bar appear again.)


Document tabs

The document tabs above the Edit window are used to switch between open documents.

  • Double-click the document tab to open the Document Properties dialog box where you can see and modify various information on the document.
  • Click a document tab once to switch to that document.
  • Right-clicking a document tab displays a shortcut menus with document-related commands.
  • If you hold the mouse pointer over a document tab, and the document has been saved, the full path and filename of the document are displayed.

Select the [View > Toolbars > Document Tabs] menu command to hide the document tabs.

Press <Ctrl + Tab> to move to different documents. Alternatively, you can scroll the mouse wheel while holding down the <Shift> key.


Showing/hiding marks and images

Showing or hiding marks

Use the [View > Marks] menu command to select which marks to use.

  • Table Gridlines
    To toggle the display of the blue outline around tables that are being edited and the dotted gridlines in tables that have hidden borders, use the [View > Marks > Table Gridlines] menu command, or click the Show/Hide Table Gridlines button on the Standard Toolbar.
  • Paragraph Marks
    To toggle the display of marks indicating paragraph breaks and line breaks, use the [View > Marks > Paragraph Marks] menu command.
  • Space Marks
    To toggle the display of marks indicating spaces, use the [View > Marks > Space Marks] menu command.
  • Special Tag Marks
    To toggle the display of marks indicating layer tags, bookmarks, comments, unknown tags, and the start of bulleted or numbered lists, and the display of dotted outlines around forms, applets, plug-ins, ActiveX controls, and multimedia objects, use the [View > Marks > Special Tag Marks] menu command.
  • Layer Outlines
    To toggle the display of the gray outlines around layers, use the [View > Marks > Layer Outlines] menu command.
  • Current Table
    To toggle the display of the blue outline around tables that are being edited, select the [View > Marks > Current Table] menu command.
  • All
    To toggle the display of all marks, use the [View > Marks > All] menu command.

Showing or hiding images

Select [View > Images] to decide which of them should be shown.

  • View Images
    To toggle the display of images, use the [View > Images > View Images] menu command.
  • View Background
    To toggle the display of background images, use the [View > Images > View Background] menu command.
  • View GIF Animations
    To toggle the display of GIF animations, use the [View > Images > View GIF Animations] menu command.

top


Setting the Edit window

Setting window size

Select the [View > Window Size > User Setting...] menu command to open the Window Size dialog box where you can specify the size of the WebEditor window.

Zooming the Edit window

Click Zoom In/Out [image] on the Standard Toolbar to view the contents of the Edit window enlarged or reduced. Select the scale from the drop-down menu. Default is '100%'. Select 'Page height' to fit the page in the Edit window so that you can see both top and bottom of the page at once. Select 'Page width' to resize the page in the Edit window so that you can see both left and right end of the page at once.

If you use a wheel mouse, scroll the mouse wheel while holding <Ctrl> key to zoom in/out the Edit window.


Arranging document windows

When you have multiple documents open, they are maximized by default, and each document fills the Namo WebEditor main window while it is the active document. However, if you prefer, you can view each document in a separate window by selecting one of the window arrangement commands in the Window menu. These commands are described below.
  • Cascade Windows [Window > Cascade]
    Overlaps the document windows so that the top left corner of each window is offset by about 25 pixels both horizontally and vertically from the top left corner of the next and previous windows. The active document is placed in front, and the other documents are placed behind the active document in the order in which they were last active.
  • Tile Horizontally [Window > Tile Horizontally]
    Tiles the windows horizontally so that each window uses an equal amount of space and all the windows together fill the main window, with no overlapping. The active document is placed on top, and the other documents are placed under the active document in the order in which they were last active.
  • Tile Verically [Window >Tile Vertically]
    Tiles the windows vertically so that each window uses an equal amount of space and all the windows together fill the main window, with no overlapping. The active document is placed leftmost, and the other documents are placed to the right of the active document in the order in which they were last active.
  • Arrange Icons [Window > Arrange Icons]
    If any of the document window are minimized ("iconized"), arranges the minimized windows neatly at the bottom of the main window. This can be useful when minimized windows are scattered over the main window.

top


Setting editing tools

Namo WebEditor provides various tools that facilitates Web document editing. You can choose whether to use these tools according to your preferences.

Rulers

Shows or hides rulers at the edges of the Edit window, and lets you control ruler settings. Select the [View > Rulers] menu command, and choose from Show All, Horizontal Ruler, Vertical Ruler. Select Reset Origin to reset the starting point of the rulers to '0'.

Layout grid

The layout grid is a grid of horizontal and vertical lines that can be used to help align document elements. The layout grid is only visible in Namo WebEditor's Edit window; it is not visible in a Web browser. Commands for working with the layout grid are in the Grid submenu of the View menu. Select the [View > Grid > Show] menu command to show or hide the gridlines. If you select Snap, objects are guided or attached to the gridlines as they are inserted in the document.

Layout guides

Layout guides are horizontal or vertical lines that you can position anywhere in the Edit window to help align page elements. Guides are only visible in Namo WebEditor's Edit window; they are not visible in a Web browser. Commands for working with guides are in the Guides submenu of the View menu.

By default, the layout grid's guidelines are spaced 50 pixels apart, with 10 pixels between subdivisions. You can change these settings using the [View > Grid > Settings] command. You can also change the color of the grid and guides using the same command.


Setting rulers

Show All

Horizontal Ruler

Vertical Ruler

Reset Origin

Shows or hides rulers at the edges of the Edit window, and lets you control ruler settings.

Show All

Shows or Hides all rulers. Select the [View > Rulers > Show All] menu command to show both horizontal and vertical rulers. Select the [View > Rulers > Show All] menu command again to hide both rulers. You can also press <Alt+Shift+R> to show or hide all rulers.

Horizontal Ruler

Shows or hides the vertical ruler at the top edge of the Edit window. Select the [View > Rulers > Horizontal Ruler] menu command to show the horizontal ruler at the top edge of the Edit window. Select [View > Rulers > Horizontal Ruler] again to hide the ruler.

Vertical Ruler

Shows or hides the horizontal ruler at the left edge of the Edit window. Select [View > Rulers > Vertical Ruler] to show vertical ruler at the left edge window. Select [View > Rulers > Vertical Ruler] again to hide the ruler.

Reset Origin

Resets both rulers' starting point to zero. The origin of a ruler can be moved by clicking the small gray box at the corner of the two rulers and dragging the mouse pointer out to a point on the ruler, then releasing the mouse button. Select the [View > Rulers > Reset Origin] menu command to reset the origins of both rulers.


Setting the layout grid

The layout grid is a grid of horizontal and vertical lines that can be used to help align page elements. The layout grid is only visible in Namo WebEditor's Edit window; it is not visible in a Web browser. To modify the layout grid setting, select the [View > Grid > Show] menu command.

Showing or hiding the layout grid

To show the layout grid, select the [View > Grid > Show] menu command. To hide the grids, select again the [View > Grid > Show] menu command.

Snap-to-grid

When snap-to-grid is on, floating page elements (layers) "snap" to the nearest gridline or subdivision. To turn snap-to-grid on or off, use the [View > Grid > Snap] menu command.

Grid settings

Use the [View > Grid > Settings...] menu command to open the Guides/Grid tab of the Preferences dialog box, so you can set the options for the layout grid.


Setting layout guides

Creating a layout guide

Moving or removing a layout guide

Copying a layout guide

Locking layout guides

Hiding layout guides

Snap-to-guide

Layout guide settings

Layout guides are horizontal or vertical lines that you can position anywhere in the Edit window to help align document elements. Guides are only visible in Namo WebEditor's Edit window; they are not visible in a Web browser. Commands for working with guides are in the Guides submenu of the View menu.

Creating a layout guide

To create a layout guide, you must have one or both rulers turned on.
  1. Select the [View > Rulers] menu command to turn on the rulers.
  2. Select Show All or Horizontal Ruler or Vertical Ruler. You can make vertical and horizontal guides from Vertical Ruler and Horizontal Ruler, respectively.
  3. To create a guide, click-hold anywhere inside the horizontal or the vertical ruler and drag out to the Edit window. As you drag, a dotted line will follow the mouse pointer.
  4. When the dotted line is at the position where you want the guide to be, release the mouse button.

Moving or removing a layout guide

To move a layout guide, place the mouse pointer on top of the guide you want to move. While the mouse pointer is in the shape of a double bar with arrows on each side, click and drag the ruler to the new location. To remove the guide, drag it all the way back to the ruler.

To remove all guides in one step, use the [View > Guides > Clear All] menu command.

Copying a layout guide

If you hold down the <Ctrl> key while dragging a guide, a new guide will be created at the position where you release the mouse button. You can work on something with multiple guides on.

Locking layout guides

To lock the layout guides so that they cannot be accidentally moved, use the [View > Guides > Lock] menu command. Use the command again to unlock the guides.

Hiding layout guides

You can hide all layout guides without removing them by using the [View > Guides > Show] menu command. Use the command again to show the guides.

Snap-to-guide

When the [View > Guides > Snap] menu command is selected , floating page elements (layers) "snap" to the nearest guide. To turn snap-to-guide on or off, use the [View > Guides > Snap] menu command.

Layout guide settings

Use the [View > Guides > Settings...] menu command to open the Grid/Guides tab of the Preferences dialog box, so you can set the options for layout guides.

By default, the layout guides' are solid lines. You can change these settings using the [View > Grid > Settings] menu command. You can also change the color of the grid and guides using the same command.

top


Setting toolbars

Showing or hiding toolbars

Namo WebEditor 5 provides various toolbars,such as Standard, Formatting, Image, Table, Hyperlink, Form, Layout, and Layout Table Toolbars. When you start the WebEditor Standard Toolbar, Image Toolbar, Layout Table Toolbar, and Formatting Toolbar will be placed beneath the main menu by default. If you wish to show toolbars other than these, select the [View > Toolbars] menu command and select the toolbar you wish to show. If you want to hide a toolbar, select again the [View > Toolbars] menu command and deselect the toolbar you want to hide.

Moving toolbars

Drag the left border [image] of a toolbar to anywhere you want to locate the toolbar.

Docking and undocking toolbars

When you run Namo WebEditor, toolbars are docked in the program window beneath the main menu by default. If you wish to undock a toolbar, double-click the left [image] border of the toolbar. If you wish to dock the toolbar again, double-click the title bar of the undocked toolbar or drag the toolbar any where around the Edit window. A box with black borders will appear if the toolbar can be docked to that position.

Editing toolbars

Select the [View > Toolbars > Customize...] menu command to edit a toolbar in the Toolbars dialog box. You can add or remove buttons, or make a new toolbar that contains the buttons you use frequently.


Creating a new toolbar

  1. Select the [View > Toolbars > Customize...] menu command.
  2. Click New... in the Toolbars dialog box.
  3. In the New Toolbar dialog box, enter a name for the new toolbar in the Toolbar name text box and click OK.

  4. In the Buttons tab of the Customize Toolbars dialog box, select a category.
  5. Drag buttons you wish to add to the new toolbar by dragging and dropping the icons.
  6. Click OK.


Setting Inspector and Action window

Docking and undocking the Inspector

When you start Namo WebEditor 5.0, Document Inspector is shown separately from Edit window. Double-click the title bar of the Inspector to dock it to the right side of Edit window. Double-click the horizontal line placed above the Inspector name to undock the Inspector. Inspector can be docked to the right or the left of the Edit window. A box with dark gray borders appears if the Inspector could be docked to any position.

Moving Inspector

Drag the title bar or the horizontal line in the top, to move the Inspector. You can move the Action window by the same method.

If you deselect Allow docking in the shortcut menu of the Inspector or the Action window, Inspector or Action windows cannot be docked.

Closing Inspector and Action window

Click 'x' in the top-right of the Inspector or the Action window to close. To reopen the Inspector, select the [Window > Inspector] menu command. To reopen the Action window, select the [Window > Action] menu command, or press <Alt + 7>.

Resizing Inspector and Action window

Drag any of the borders of the Inspector and the Action window to resize them. Action window and Inspector may have some blank space above or below.


Toolbars dialog box

[View > Toolbars > Customize...]

You can add, remove, or edit toolbars.
  • Toolbars:
    The list box lists the existing Toolbars. Check boxes indicate whether each toolbar is currently visible in the Edit window. To show or hide a toolbar, click the check box next to its name.
  • New... button
    Click to add a custom toolbar. In the New Toolbar dialog box, enter a name for the new toolbar.

    A new, empty toolbar will appear. To add buttons to the toolbar, switch to the Buttons tab and drag buttons from the selection box to the toolbar.
  • Customize... button
    Click to modify the selected toolbar in the Customize Toolbars dialog box.

  • Reset button
    Resets the selected toolbar, restoring its original set of buttons.
  • Show tooltips

    • If this option is selected, the name of a toolbar button will be displayed when you hold the mouse pointer over the button.

  • Cool look
    If Cool look is selected, the buttons in the toolbar appears with no borders.

            •

  • Close
    Closes the Toolbars dialog box.

top


New Toolbar dialog box

[Tools > Customize Toolbars... - New... button]

You can enter a name for a new custom toolbar.
  • Toolbar name
    Enter a name for the new toolbar.

  • OK
    Click OK to create a new toolbar.


Customize Toolbars dialog box - Buttons tab

[View > Toolbars > Customize... - Buttons tab]

You can add, delete, or edit toolbars.
  • Categories
    The list box lists the available categories of buttons. Click a category to display the buttons in that category.

  • Buttons
    The selection box shows the buttons in the selected category. Click a button to see a brief description of the button's function in Description.
    • To add a button to a toolbar, drag in from the button selection box to the desired location in the toolbar.

    • To remove a button from a toolbar, drag it out of the toolbar.
    • To change the position of a button on a toolbar, drag it to the new location.
    • To create a divider between two buttons on a toolbar, drag the button on the right a few pixels to the right. To remove a divider, drag the button on the right side of the divider a few pixels to the left.
  • Description
    Shows a brief description of the selected button's function.

You can move and remove toolbar buttons even when the Customize Toolbars dialog box is not open, by dragging them while holding the <Alt> key down.

top


Customize Toolbars dialog box - Toolbars tab

[View > Toolbars > Customize... - Toolbars tab]

You can add, delete, or edit toolbars.
  • Toolbars
    The list box lists the existing toolbars. Check boxes indicate whether each toolbar is currently visible. To show or hide a toolbar, click the check box next to its name.
  • Show tooltip
    If this option is selected, the name of a toolbar button will be displayed when you hold the mouse pointer over the button.


Window Size dialog box

[View > Window Size > User Setting...]

You can resize Namo WebEditor's main window to a standard screen or paper size.

Selecting a window size

A convenient way to check whether the document you're editing will fit in a browser that's maximized at a particular screen resolution without scrolling is to resize Namo WebEditor's window to the desired screen size. You can select from among three common screen sizes, or click Custom and enter an arbitrary size. You can also set the window size to one of two standard paper sizes. When you click OK, the Namo WebEditor window will be resized to the selected size.

Depending on the toolbar arrangement, the size of the Edit window after resizing to a standard screen size may be significantly smaller than the document area of a browser.


Preferences dialog box - Document Defaults tab

[Tools > Preferences... - Document Defaults tab]

Colors

Character set and fonts

Information

These settings only apply to new documents. Any changes you make here are not applied to existing documents.

Colors

  • Text
    Select the default text color from the drop-down menu. Default is black.
  • Background
    Select the default document background color from the drop-down menu. Default is white.
  • Hyperlink
    Select the default color for unvisited hyperlinks from the drop-down menu. Default is blue.
  • Visited link
    Select the default color for visited hyperlinks from the drop-down menu. Default is purple.
  • Active link
    Select the default color for active hyperlinks from the drop-down menu. Default is red.

Character set and fonts

  • Character set
    Select the default character set from the drop-down menu. User-defined means the document will use whatever encoding the browser is set to use by default. The Internet code for the selected character set appears in the text box to the right of the drop-down menu.
  • Proportional font
    Select the default proportional font and size from the drop-down menus.
  • Fixed-width font
    Select the default fixed-width (monospaced) font and size from the drop-down menus.

The default font settings are only used for Namo WebEditor's Edit window. Each browser has its own default fonts, which its uses when an HTML document doesn't specify what fonts to use.

In order for the appearance of text in the Edit window to match its appearance in the Preview window as closely as possible when a font is not specified, you should set the default fonts in Namo WebEditor to the same default fonts you specified in Internet Explorer.

Information

  • Author
    Enter the default author name. This name will appear next to Author in both the Document Information dialog box and the General tab of the Document Properties dialog box for new documents.

top


Preferences dialog box - Edit tab

[Tools > Preferences... - Edit tab]

General

Spelling

You can set options for editing documents.

General

  • Load most recent documents at startup
    Select this option to have Namo WebEditor automatically open at startup the documents that were open the last time you quit Namo WebEditor.
  • Display actual fonts in font menu
    Display font names in the Font drop-down menu on the Formatting Toolbar in their actual typeface.
  • Lock Insert key
    Disable switching to overwrite mode using the <Insert> key. Selecting this option keeps you from switching to the overwrite mode by pressing <Insert> key.
  • Automatic link creation
    Enables automatic creation of hyperlinks when you type a URL in the Edit window. For example, if this option is enabled and you type "www.mysite.com" followed by a space or the <Enter> key in the Edit window, Namo WebEditor will automatically create a hyperlink to 'http://www.mysite.com' on the URL. You can undo an automatic link creation by typing <Ctrl+Z> immediately after Namo WebEditor creates the link.
  • Inherit attributes from the character on the left side of the cursor
    Select this option to inherit attributes from the character on the left side of the cursor for a newly entered text. If this options is selected, the same character attribute of the character on left of the cursor will be applied to the character you enter.
  • Clip Art directory
    Specifies the path to the clip art folder on your hard drive. If you installed Namo WebEditor normally, you should not need to modify this path. However, if you installed the clip art library after installing Namo WebEditor, you may need to specify the correct clip art directory here. Click [image] to locate and select the directory.

Spelling

  • Check spelling as you type
    Checks spelling on the fly as you type in the Edit window. Misspelled words will be marked with a wavy red underline. While you are typing a word, the red underline will appear until you finish typing the word (assuming you spell it correctly).
  • Hide spelling errors
    Do not mark misspelled words with a red underline. This option is available only if Check spelling as you type is enabled.
  • Spelling Dictionary 1/Spelling Dictionary 2
    Specify the primary and secondary active spelling dictionaries. Both dictionaries will be used simultaneously, so that you can check spelling in two languages at the same time. The available languages are English (US), English (UK), French, German, Danish, Dutch, Finnish, Italian, Norwegian, Portuguese, Portuguese (Brazil), Spanish, and Swedish.

top


Preferences dialog box - Save tab

[Tools > Preferences... - Save tab]
You can set options for saving documents.
  • Make backups
    Automatically save the old version of the current document when you save the document again. The backup file has the same name, but with '.bak' as the extension. To open the backup file, change its extension to '.htm' or '.html' and open it as you normally would.
  • Autosave interval:
    Select this option to have Namo WebEditor automatically save the current document periodically. Specify the time interval in minutes.
  • Reformat HTML code
    If this option is selected, Namo WebEditor will reformat and clean up all HTML code in the document (including handwritten or imported code) when the document is saved.
  • HTML Formatting Options... button
    Click to set various formatting options for HTML generated by Namo WebEditor in the HTML Formatting Options dialog box.
  • Save Smart Button, equation, and chart images in
    Specify the path of the folder in which to save the image files that are automatically generated for equations, charts, or Smart Buttons. By default, the path points to an 'images' folder in the same folder as the document. To save the equation, chart, Smart Button images in the folder named 'resource', type in 'resource' in this text box. To save the equation, chart, Smart Button images in the same folder as the document, leave this text box empty.

Equation, chart, and Smart Button images can be converted to the ordinary GIF images. In this case, they lose their editability as equation, chart, or Smart Button images.

top


Preferences dialog box - External Programs tab

[Tools > Preferences - External Program Tab]
You can specify up to four external programs to launch using a menu command in Namo WebEditor.

You can specify up to four external programs to open the current document with by using a menu command. For each program, enter its name and the path to the program's execution (.exe) file. Click Browse... to locate and specify the execution file.

The external programs can be launched using the [Tools > External Programs] menu. When you launch an external program, the program automatically opens the document you are currently editing in Namo WebEditor.


Preferences dialog box - Guides/Grid tab

[Tools > Preferences... - Guides/Grid tab], [View > "Grid" or "Guides" > Settings...]

You can edit options for guides and grid.

Grid settings

  • Color
    Choose the color of the gridlines in the Color Picker Pop-up.
  • Style
    Click the Lines radio button to choose solid lines or the Dots radio button to choose dotted lines as grid.
  • Grid spacing
    Enter the spacing between gridlines, in pixels.
  • Subdivisions
    Enter the spacing of the invisible subdivisions between the gridlines. These subdivisions are used when snap-to is enabled; objects will snap to the invisible subdivisions. For best snap-to results, set the grid spacing at an even multiple of the subdivisions. Objects actually snap to subdivisions, not to gridlines. But if the gridlines are "in sync" with the subdivisions, objects will in effect snap to gridlines.

Guides settings

  • Color
    Choose the color of guides in the drop-down menu.
  • Style
    Click the Lines radio button to choose solid lines or the Dots radio button to choose dotted lines as guides.


Preferences dialog box - Internet tab

[Tools > Preferences... - Internet tab]

Internet connection (HTTP)

Select DLL

Publishing

You can set Internet options for publishing the documents to a remote site.

Internet connection (HTTP)

  • Use FTP when saving directly to a server
    This option specifies which Internet communications protocol to use when saving a document directly to a Web server (you do this by using the Save to URL button in the Save As dialog box or by saving a document that you opened from a URL). If Use FTP when saving directly to a server is enabled, Namo WebEditor will use FTP to upload the document; otherwise it will use HTTP (the protocol normally used by Web browsers). FTP is preferable because you can save the document to a new directory on the server (the new directory will be created automatically). This is not possible using HTTP.
  • Show HTTP transfer status
    Show the transfer progress in a status window when downloading or uploading documents using HTTP.
  • Offline mode (don't attempt to load remote documents or resources)
    Normally, when you open a document that contains remote resources (resources, such as images, that reside on a remote server rather than on the local computer), Namo WebEditor tries to load the resources from the server so that they can be displayed in the Edit window. This can cause problems if your Internet connection is intermittent; if you use a dial-up connection, your computer may try to connect to the Internet. If Offline mode is selected, Namo WebEditor will not try to load these remote resources.

In offline mode, Namo WebEditor cannot connect to the Internet. Therefore, certain functions, such as publishing, importing documents from the Web, and saving documents directly to a server are disabled.

Select DLL

  • Use NamoNet.DLL
    Select this option to have Namo WebEditor use its own built-in DLL (Dynamic Link Library) for all Internet connections. Click Settings... to open the NamoNet.DLL Settings dialog box, where you can configure various connection options.
  • Use Internet Explorer's DLL (WinInet.DLL)
    Select this option to have Namo WebEditor use Window's WinInet.DLL for all Internet connections. Click Settings... to open the Windows Internet Properties dialog box, where you can configure various connection options.

Normally, you should leave Use NamoNet.DLL enabled. You should only need to use Window's DLL if you are experiencing problems with a particular server when using NamoNet.DLL.

Publishing

  • Convert filenames to lowercase when publishing
    Select this option to have Namo WebEditor always publish files using lowercase names, except when publishing a site. Since Unix servers are case-sensitive, this option can be useful if all the hyperlinks in the documents use lowercase filenames, but some of the target files use uppercase or mixed-case filenames.
  • Extensions... button
    Click to edit the list of filename extensions for files that will be treated as text files when publishing. For more information, refer to Text File Extensions.

This tab is not available while you are connected to a Web server in the Publish tab of the Site Manager.

top


Preferences dialog box - Sites tab

[Tools > Preferences...- Sites tab]

Confirmation options

Auto link correction

Other options

You can set options for working with sites.

Confirmations options

  • Check for invalid filenames
    Check for invalid file names when renaming files in the Site Manager.
  • Confirm deleting files
    Display a confirmation dialog box when deleting files in a site.

Auto link correction

  • Never correct
    Never correct links in other documents when you change the name of a document in a site.
  • Always correct
    Always correct links in other documents, without prompting, when you change the name of a document in a site.
  • Confirm before correcting
    Prompt to correct links in other documents when you change the name of a document in a site.

Other options

  • Load most recent site at startup
    When starting up Namo WebEditor, open the site that was open the last time you quit the program (if any).
  • Check external links when verifying links
    When verifying links in a site, also check the validity of links to Web documents in other sites.
    Namo WebEditor can only check external HTTP (Web) links. Other link types, such as FTP and mailto, cannot be checked.)

top


Preferences dialog box - HTML Source tab

[Tools > Preferences... - HTML Source tab]

General

Source coloring

Margins

Other options

You can set options for editing HTML directly in the HTML window.

General

  • Source font
    Select the font for in the HTML window.
  • Font size
    Select the font size for the HTML window.
  • Font color
    Select the general font color for the HTML window. Default is black.
  • Background color
    Select the background color for the HTML window. Default is white.
  • Current line
    Select a color to mark the current line in the HTML window.

Source coloring

  • Enable source coloring
    Special kinds of text in the HTML window will be displayed in color. Select an attribute from the drop-down menu and the color to apply to the selected attribute in the Color Picker Pop-up located right next to the drop-down menu.

Margins

  • Show margin
    Shows margin on the left side of the HTML window.
  • Show line numbers
    Shows line numbers on the left side of the HTML window. Line numbers are especially helpful when debugging script errors.
  • Line number color
    Select the color for line numbers.
  • Margin color
    Select the color of the margin area containing the line numbers.

Other options

  • Auto indentation
    Automatically indent a new line to the same starting position as the previous line.
  • Wrap lines on right border
    Any exceeding line will be placed on the line below.
  • Use tabs to indent
    Indent using tabs. Otherwise, use spaces.
  • Tab width
    Specify the length of tabs in characters.
  • Restore Defaults
    Click to remove all the attributes you have specified. By clicking this button, the HTML source setting in the HTML tab will be switched to the default setting.

top


Preferences dialog box - Browsers tab

[Tools > Preferences... - Browsers tab]

You can specify two Web browsers to be used to preview documents.

Browser 1/Browser 2

  • Browser
    Select a browser from the drop-down menu. To use a browser other than Netscape or Internet Explorer, choose Other.
  • DDE name
    This is the name used to refer to the browser when Namo WebEditor tells the browser to open the current document. The DDE name is usually the same as the filename of the browser's execution file name, minus the '.exe' extension (for example, 'Opera'). The DDE name is supplied automatically if you chose Netscape or Internet Explorer as the browser.
  • Program path
    Specify the path to the browser's execution file (for example, "C:\Program Files\Internet Explorer\iexplore.exe"). Click Browse... to locate and select the execution file.

If you choose Other as the browser, the DDE name is also used by Namo WebEditor as the browser's name in the View menu. For example, if you are configuring Opera as Browser 1, you would enter 'Opera' as the DDE name, and Namo WebEditor will display View with Opera in the View menu.

By default, Namo WebEditor is set up to use Netscape Navigator and Microsoft Internet Explorer for previewing documents. However, you can change either browser assignment in this tab of the Preferences dialog box.


NamoNet.DLL Settings dialog box

[Tools > Preferences... - Internet tab - select Use NamoNet.DLL - click Settings...]
You can configure Namo WebEditor's built-in DLL used for uploading and downloading on the Internet.

Use proxies

A proxy is a server that acts as a "firewall" against unauthorized access to a corporate LAN from outside. If you access the Internet through a proxy server for either HTTP or FTP, select Use proxies and enter the proxy server's address and port number in the appropriate text boxes. If you don't have this information or are not sure whether your company uses proxy servers, ask your network administrator.
  • HTTP
    Enter the address and port number of the HTTP proxy server.
  • FTP
    Enter the address and port number of the FTP proxy server.
  • Sites to connect without using a proxy server
    If there are any Web sites that should be accessed without going through the proxy server, enter their URLs here. Separate URLs with a colon or semicolon. Use an asterisk (*) as a wildcard character.

    Example: http://www.namo.com; http://*.namo.co.kr

Cache settings

Namo WebEditor maintains its own cache of downloaded Internet files to speed up loading imported documents or resources, such as images. You can configure the cache using the settings described below.
  • Check always
    The modification dates of the document on the Web site and of the cached copy are compared, and whichever copy is newer will be loaded.
  • Always use cache
    Cached documents will always be loaded from the cache. Namo WebEditor will not check for newer versions on the Web site.
  • Never use cache
    Documents will always be loaded from the Web site, even if they have been cached.
  • Cache directory
    Specify the directory in which to store the cache. Type the path in the text box, or click Browse... to locate and select a folder.
  • Maximum
    Specify the maximum size of the cache.
  • Clear button
    Click to delete all the files in the cache.

top


HTML Formatting Options dialog box

[Tools > Preferences... - Preferences dialog box - Save tab - HTML Formatting Options... button]
You can set various formatting options for HTML generated by Namo WebEditor.
  • Wrap lines at:
    Select this option to break long lines at the specified number of characters.
  • Indent
    Select this option to insert spaces or tabs at the beginning of certain lines, such as those inside a <table> tag, to enhance readability. Specify whether to insert spaces or tabs, and how many.
  • Allow line breaks inside tags
    Select this option to allow wrapping inside tags.
  • Capitalize tag names
    Choose to capitalize all the tag names. This option, changes <table border="1"> to <TABLE border="1">, for example.
  • Capitalize tag attribute names
     Choose to capitalize all the tag attribute names. This option changes <table border="1"> to <table BORDER="1">, for example. .

These formatting options are only applied if you have selected Reformat HTML code in the Save tab of the Preferences dialog box.


Text File Extensions dialog box

[Tools > Preferences... - Internet tab - Extensions... button]

You can edit the list of filename extensions for files that will be treated as text files when publishing.

Enter filename extensions for files that will be treated as text files instead of the default binary when being published to a Web server.

Put a space between extensions.

Use Defaults button

Click to enter txt(the default text file extensions), pl (Perl), sh (Unix shell script), and py (Python).

Certain file types are always treated as text, even if you don't enter their extensions here. These include htm, html, txt, asp, php, and other types that Namo WebEditor knows about.

Most CGI files should be treated as text files when publishing.


Introduction to Web Documents

What is a Web document?

In the most general sense, a Web document is any document that can be downloaded (copied over communication lines to your own computer) from the World Wide Web. Usually, however, when people talk about Web documents, they are talking about documents that have been formatted specifically for the Web in HTML (Hypertext Markup Language). HTML is a document format designed for the Web, in the same way that RTF (Rich Text Format) is a document format designed for word processing. Whereas RTF documents are meant to be printed, HTML documents are meant to be downloaded from Web servers and displayed in Web browsers.

Although HTML is a language, you don't need to know HTML in order to create HTML documents, any more than you need to know RTF to use a word processor. Visual HTML authoring programs like Namo WebEditor let you create Web documents using an intuitive word processor-like interface, and the program takes care of generating the necessary HTML "source" to make the document readable with a Web browser.

Web server and Web documents

Web documents created in HTML can be viewed on the Internet through a Web server. The Web server is built on the Internet, and makes use of many of the mechanisms the Internet provides. The Web server has a simple architecture. Clients send messages to Web servers. The Web servers are responsible for sending the requested information to the clients (also known as browsers), who are then responsible for presenting the Web document to the user. Therefore, to let others view your Web documents, you must publish them to a Web server. There are an endless number of Web servers and each carries its own address (URL). Once published, the Web documents can be viewed through Web browsers with the corresponding URL for the Web server.

Special characteristics of Web documents

  • Web documents contain hyperlinks
    Perhaps the most important difference between Web documents and other kinds of documents is that Web documents usually contain hyperlinks. A hyperlink is something--usually a word or a picture--that, when you click on it, causes the Web browser to "go to" a different document. Thanks to hyperlinks (also simply called "links"), Web documents can be connected to one another, creating the vast information network known as the World Wide Web.
  • Web documents can be interactive
    A Web document isn't limited to static text and pictures. Thanks to scripting languages such as Java Script, and multimedia technologies such as Quick Time, a Web document can be an interactive, dynamic experience. For instance, you might click on an icon in the document to play a movie or start a game of Pong. You could click a heading to make a menu drop down, or drag pictures of toys into a "basket" for purchasing online. Interactivity is one of the things that makes the Web such a powerful medium.
  • Web documents are meant to be viewed on a monitor
    Unlike some other document formats, HTML documents are meant primarily to be displayed on a computer screen, not printed on paper. Therefore, when creating a Web document you should always take into consideration that your document may be viewed on a monitor with different characteristics from your own. While your monitor may be set at a resolution of 1024 x 768 pixels and 24-bit color, some of your Web site visitors may be using 640 x 480 and 8-bit color. In addition, the fonts you use in your document may not be available on your visitors' computers, and the same point size can appear as different actual sizes. To make your Web site user-friendly for the maximum number of visitors, avoid using fixed table sizes too wide for small screens, and avoid layouts that depend on certain lines not breaking in order to look good.
  • Web documents are transmitted through Internet connections
    Unlike other documents, which usually reside on a user's computer or local network, a Web document must be downloaded to the user's computer through an Internet connection. For some visitors, this can be quite slow. Therefore, when designing Web documents you should also take into consideration how long the document will take to transfer over a slow connection, such as a modem link. Large images and multimedia files slow download times considerably, so use them sparingly.

The World Wide Web is one of the most powerful Internet services. Due to the fact that it supports various types of multimedia information (text, images, audio, video, computational services) it became popular despite its short history.

top


Creating Web Documents Using Namo WebEditor

Working in WYSIWYG mode

Namo WebEditor supports the WYSIWYG Web document editing method, which enables even novices to easily create Web documents. If you want to edit your document in WYSIWYG mode, work with your documents in Namo WebEditor's Edit window.

Coding directly in HTML

Advanced users can also create Web documents by coding directly in HTML. You can enter HTML codes directly by clicking the Namo WebEditor's HTML tab. Namo WebEditor offers a source protection feature, which keeps the HTML code that the users have entered from being modified.


Creating a new document

You can rapidly create different types of document using the document templates.

  1. Select the [File > New...] menu command.
  2. In the Document or Component folder of the Resource Manager window, select the type of document you want. The information on the selected document type appears in the Description box below the preview area. Click OK and a new document is opened in the Edit window.

You can rapidly create a blank document by clicking New [image] on the Standard Toolbar. Additional new documents are named as 'noname1', 'noname2', with increasing integers after 'noname'. These names are the temporary names, which will be used until the documents are saved otherwise.

To create a frameset document, select the [Frame > New Frameset...] menu command.


Saving a document

You can save the document you have edited as different formats including XML, Text, as well as HTML. In your first saving, the Save As dialog box appears to modify the temporary names (noname1.htm, noname2.htm...) given by Namo WebEditor.

  1. Click Save [image] or select the [File > Save...] menu command.
  2. In the Save As dialog box, specify the File name and Save as type.
  3. Enter the document title in Title and click OK.
  4. The document is saved and the specified filename appears in the document tab at the top of the Edit window.

If the file name is too long to be displayed on the document tab, the truncated part appears as '...'. If you place your mouse-pointer on the tab, the whole filename is displayed as a tooltip along with the path of the file.

If you have inserted images or multimedia files, a dialog appears asking whether you want to save the resource files as well.

  1. In the Copy Resource Files dialog box, decide whether to copy the resource files by checking the checkboxes.
  2. Click the Choose Folder... button and specify the folder in which you want to save the files in the Choose Folder dialog box. Then click OK.
  3. In the Copy Resource Files dialog box, click OK.


Saving a document with a new filename

You can save the current document with a new filename, format or at a new location.
  1. Select the [File > Save As... ] menu command.
  2. In the Save As dialog box, enter the File name and specify the type of the file from the Save as type drop-down list.
  3. Enter the document title in Title and click OK.

In case you have inserted images or multimedia files, a dialog box appears asking whether you want to copy and save the resource files as well.

  1. In the Copy Resource Files dialog box, decide whether to copy the resource files by checking the checkboxes.
  2. Click the Choose Folder... button and specify the folder to which you want to save the files in the Choose Folder dialog box. Then click OK.
  3. In the Copy Resource Files dialog box, click OK.

If you want to save a document in a file format other than HTML, select the file format you want from the Save as type drop-down menu in the Save As dialog box.


Opening a document

  1. Click Open [image] on the Standard Toolbar or select the [File > Open...] menu command.
  2. In the Open dialog box, specify the desired file and click Open. Multiple files may be simultaneously opened by selecting more than 2 files.
  3. The selected document is opened in the Edit window. If you have opened multiple files, the corresponding documents are opened in tabs. Pressing <Ctrl+Tab> lets you move quickly between different documents.

Clicking the file names while pressing the <Ctrl> key in the Open dialog box allows you to select multiple files. Clicking one file name and then another file name while pressing the <Shift> key in the Open dialog box lets you select all the files between the two clicked.

You can open the documents you have worked with recently using the [File > Recent Files] menu. To update the open documents to the latest version, select the [View > Redraw Screen] menu command.


Opening a URL

If you are connected to the Internet, you can open a Web page by entering the URL of the page.

  1. Click Open [image] on the Standard Toolbar or select the [File > Open...] menu command.
  2. In the Open dialog box, enter the URL of the Web page you want to open in URL text box.
  3. Click Open URL.

You can save a document directly to your Web server if you have opened the document in your account using Open URL. To do this, you should set the relevant information in the Remote Sites dialog box. In case you have opened a document,which is write-protected, using Open URL, you should use Save As command to save the document.

Example

  1. Click Open [image] on the Standard Toolbar.
  2. In the Open dialog box, enter 'http://www.namo.com' in URL.
  3. If you click the Open URL button, a dialog box indicating the download status is displayed.
  4. The Web page with the entered URL is opened in the Edit window and the URL appears in the document tab.


Opening the most recent files

You can easily open the documents you have worked with recently to check or edit them.

  1. Select the [File > Recent Files] menu command.
  2. Select the file you want to work with from among the recent file list.
  3. The selected file is opened.

Running Namo WebEditor lets the documents you previously worked with be automatically opened. You can modify this setting by using Load most recent documents at startup option at the Edit tab in the Preference dialog box.

In case you have moved or deleted the file, Namo WebEditor shows an alarm message "Can't open **(the path of the deleted or moved file)".


Importing a Web site from the Internet

Importing a Web site from the Internet

Namo WebEditor provides a way to import an entire Web site, or selected parts of it, from the Internet. This is useful when you need to edit a site for which you don't have a copy stored on your computer, or if your local copy of a site has been damaged or deleted.

Importing a Web site

  1. Select the [Tools > Import from Web...] menu command.
  2. Click the Add... button in the Import from Web dialog box to add a new site for importing.
  3. Enter the URL of the site and specify the various importing options in the Import Properties dialog box, then click OK.
  4. Click the Import... button in the Import from Web dialog box.

Importing a large Web site can take an excessively long time, especially over a slow Internet connection. To avoid tying up your computer for hours while importing a site, try limiting the depth of links that will be followed, or specify that files larger than a given size should not be downloaded. These and other options are available at the Advanced tab of the Import Properties dialog box. Once importing is under way, if you decide to finish downloading the site, click the Stop button in the Import from Web dialog box.


Redrawing/reloading the screen

Redrawing the screen

On rare occasions, the Edit window may not show the results of your last operation. In such cases, select the [View > Redraw Screen] menu command or press <Shift + F5> to refresh the window.

Reloading the current document

There are two reasons why you may want to reload the current document.
  1. You can reload the current document using a different language encoding (character set) from the current one. This can be useful if you want to see how the document will look in a different language encoding, without actually making changes. To reload the current document using a different encoding, select the [View > Encoding] menu command and select the desired encoding from the submenu. If there are unsaved changes in the document, you will be prompted to save the document. To reload the document again using the encoding specified in the General tab of the Document Properties dialog box, select the [View > Encoding > Current Encoding].
  2. If you want to discard all changes made to the current document since the last time you saved it, press <F5>. When prompted whether to save the document, click No. The changes that are made since the last time you've saved the document are discarded and the document goes back to the state of last saving.


Entering text in the Edit window

Using Namo WebEditor's Edit window is very similar to using a word processor--the basic techniques for entering, editing, and formatting text are the same. To enter new text in the Edit window, simply start typing. The text you type will appear at the cursor (the blinking vertical bar; also called 'insertion point').

  1. Open a new document (or one on your local hard drive) in the Edit window by selecting New [image] on the Standard Toolbar.
  2. Enter the text you want simply by typing.
  3. The entered text appears where the cursor is located.

If you press <Enter>, a new paragraph is created and an empty line is inserted between the paragraphs. If you want to change lines only without inserting an empty line, select the [Insert > Line Break > Normal] menu command or press <Shift + Enter>. Selecting the [Insert > Line Break > All/Left/Right] menu command allows you to change lines in different ways according to the left or right margin.

If you activate Show/Hide Paragraph Marks [image] on the Standard Toolbar by clicking it, the line break mark( [image]) and paragraph mark( [image]) will be displayed in the Edit window.


Cut/Copy/Paste

Selected content of your document can be cut or copied, then pasted into the Edit window.

Cutting

  1. Select the section you wish to cut in the Edit window.
  2. Select the [Edit > Cut] menu command or click Cut [image] on the Standard Toolbar. (Or simply press <Ctrl+X>.)

Copying

  1. Select the section you wish to copy in the Edit window.
  2. Select the [Edit > Copy] menu command or click Copy [image] on the Standard Toolbar. (Or simply press <Ctrl+C>.)

Pasting

  1. Place your cursor where you want to paste the recently copied or cut section.
  2. Select the [Edit > Paste] menu command or click Paste [image] on the Standard Toolbar. (Or press <Ctrl+V>.)

Namo WebEditor supports the HTML clipboard, which enables you to copy and paste hyperlinks as well as plain text. If you want to copy some part in addition to the copied contents in your clipboard, press <Ctrl+Shift+C>.

When you cut or copy a selection to the clipboard, the selection replaces whatever was already in the clipboard, if anything. If you want to append a selection to the existing clipboard contents, instead of replacing the clipboard contents, hold down the Shift key while you cut or copy.

To delete the part you have selected, select the [Edit > Delete] menu command or press <Del>.

To select the whole document, select the [Edit > Select All] menu command or press <Ctrl+A>.

If you decide you didn't really want to delete/paste/cut/copy the text, select the [Edit > Undo] menu or click Undo [image] on the Standard Toolbar. You may also simply press <Ctrl+Z>, before doing anything else.

top


Copying and pasting formats

Formatting attributes, at both the character and the paragraph level, or image, chart, or table properties can be conveniently copied from one block of text to another by copying and pasting them. For example, to copy and paste character attributes, take the following steps.
  1. Place the cursor within the block of text that has the formats you wish to copy. (Do not select the block.)
  2. Select the [Edit > Copy Format...] menu command or press <Shift + F2>.
  3. In the Copy Format dialog box, select the types of formatting attributes to copy and click OK. (Paragraph style refers to all paragraph attributes, not just HTML style.)
  4. Select the block of text to which you wish to paste the copied formats. If you are pasting only paragraph formats, simply place the cursor within the block.
  5. Select the [Edit > Paste Format] menu command or press <F2>.


Finding text

You can quickly find a certain word or phrase in the current document.

  1. Select the [Edit > Find...] menu command or press <Ctrl + F>.
  2. In the Find/Replace dialog box, enter the word or phrase you wish to find in the Find text box.
  3. Specify Options and Direction and range.
  4. Click the Find Next button and the found word is displayed in the Edit window.
  5. To continue finding additional instances of the word, click the Find Next button.

If the cursor is located in the middle of the document, you should select Start at top of document to find all instances of the item. Click Replace with and the text box is activated so that you can execute the task of replacing a certain text with another.

You can repeat finding the text you have just found by selecting the [Edit > Find Again] menu command.

Example

  1. Select the [Edit > Find...] menu command.
  2. In the Find/Replace dialog box, enter 'Namo' in Find, and select the Start at top of document option.
  3. Click the Find Next button and the found word is displayed as highlighted.


Replacing the text

You can replace a certain word or phrase in the current document with another.

  1. Select the [Edit > Find...] menu command.
  2. In the Find/Replace dialog box, enter the word or phrase you wish to find in Find and the item you want to insert instead of the Find item in Replace with.
  3. Click the Replace button and the word you have specified in Find is replaced with the item you have entered in Replace with.
  4. To keep replacing, click the Replace button again.
  5. To replace all occurrences of the found text at once, click the Replace All button.

If you select an item you want to find in the Edit window and open the Find/Replace dialog box, the selected item is automatically inserted in the Find text box.

If multiple documents are open, select the Search all open documents option and click the Replace All button, which performs the task of finding and replacing the specified item in all open documents in the Edit window.

Example

  1. Select the item you want to replace with another. For example, if you want to change 'Namo' into 'NAMO' in the entire document, select 'Namo'.

  2. Select the [Edit > Find...] menu command or press the shortcut key <Ctrl + H>.
  3. In the Find/Replace dialog box, 'Namo' is automatically inserted in the Find text box. Enter 'NAMO' in Replace with.
  4. Select the Start at top of document option and click the Replace All button.

top


Undo/Redo

Namo WebEditor supports multiple undo functions. Thus, you can, if necessary, take the document back to its previous state. Redo is applicable only after you applied more than one 'undos'.

  1. Click Undo [image] on the Standard Toolbar or select the [Edit > Undo] menu command. You can also press the shortcut key <Ctrl+Z>.
  2. Undo lets you take back the last change.
  3. If you continue clicking Undo [image], Namo WebEditor undoes the latest changes one by one in reverse order.
  4. If you click Redo [image], Namo WebEditor reverses the affect of the last Undo action.

If you turn the Auto Correct function on, a word you typed can, against your expectation, turn into another word. In this case, click Undo [image], or press the shortcut key <Ctrl+Z>.


Auto Correct

The Auto Correct feature can be used to automatically detect and correct typos, misspelled words, grammatical errors, and incorrect capitalization. For example, if you type "it;s", Auto Correct automatically replaces what you typed with "it's". Initially, the Auto Correct list contains over 1,000 corrections for the most common capitalization errors, typos, and spelling errors. You can also use Auto Correct to quickly insert commonly-used phrases without having to type them out. For example, you can add an Auto Correct item to replace "ni" with "Namo Interactive Inc.".
  1. Select the [Tools > Auto Correct...] menu command.
  2. In the Auto Correct dialog box, the list box shows the list of words that will be auto corrected, and their replacements. To disable an individual Auto Correct item, click the check box next to it.
  3. Click the Add... button to add a new Auto Correct item, or select an existing Auto Correct item from the list and click the Modify... button to edit it.
  4. In the Auto Correct Information dialog box, enter in the Replace text box the word or phrase that will be replaced with the word or phrase entered in With text box and click OK.
  5. In the Auto Correct dialog box, click OK.
  • If you want to replace a part of a word, two special symbols are available: '-' (hyphen) and '*' (asterisk). For example, enter '-late' such as "belated" with "beloved". "late" by itself will not be replaced.
  • If you want to expand the target of Auto Correct to the items including a certain item, use '*'. "*" can be anything including nil. For example, 'auto*' represents all the words including 'auto' such as 'auto', 'automatic', 'automation', etc.
  • If you want to use the auto linking feature, enter @*(the word you want to replace) in the Replace text box and the URL in the With text box.

    Example: "@Namo*" => "http://www.namo.com*" (If you enter "@Namo", "Namo" appears with the hyperlinks whose URL is "www.namo.com".)

By default, the Auto Correct option is enabled. You can always turn on or off the Auto Correct option by selecting the [Tools > Auto Correct...] menu command and checking/unchecking the Enable auto correct check box in the Auto Correct dialog box.

top


Spelling check

Check Spelling suggests corrections for misspelled words and offers other spelling-related functions.
  1. Select the [Tools > Check Spelling...] menu command or press <F7>.
  2. The Spelling Check dialog box is opened. If no spelling error is found, the message "The spell check is complete." appears. If you click OK, the Spelling Check dialog box is closed.
  3. If you want to skip a word detected, click Ignore. If you want to correct a word detected, click Change.
  4. Click OK.

If you select the Check spelling as you type option at the Edit tab of the Preferences dialog box, Namo WebEditor automatically performs the spell check and underlines words that should be corrected.


Inserting horizontal lines

A horizontal line can be inserted as a divider.
  1. Select the [Insert > Horizontal Line] menu command.
  2. A default horizontal line is inserted in the Edit window, along with a new paragraph break above it. To modify the properties of the inserted line, Double-click the horizontal line.
  3. In the Horizontal Line Properties dialog box, modify Size, Alignment, and Style and click OK.

Example

  1. Select the [Insert > Horizontal Line] menu command.
  2. A default horizontal line is inserted in your Edit window, along with a new paragraph break above it.
  3. Double-click the inserted horizontal line.
  4. In the Horizontal Line Properties dialog box, set Size to '250' pixel, Alignment to 'Left' and Color to 'Green (#008000)' and check Solid line (No 3D effect).
  5. Click OK and the line is changed as follows.

In the Horizontal Line Properties dialog box, the Color is displayed as specified only in Internet Explorer.

The length of the divider is determined by the right margin of the paragraph in which cursor was placed before inserting the divider. If the paragraph's right margin was not specified, the divider will be as wide as the window.


Inserting symbols

Special characters or symbols can be inserted, which cannot be typed using the keyboard.
  1. Select the [Insert > Symbol...] menu command.
  2. In the Symbol dialog box, click the tab you want. The items in the Symbol tab are properly displayed irrespective of your Windows character set. On the other hand, the items in the Unicode tab are properly displayed only when your Windows character set is preset as Unicode.
  3. Select the symbol to be inserted and click Insert.

Example

  1. Place the cursor where you want to insert a symbol and select the [Insert > Symbol...] menu command.
  2. In the Symbol dialog box, click the Unicode tab.
  3. If you click a paragraph mark( [image]), the magnified image appear at the bottom left corner of the dialog box.

  4. Click the Insert button and the selected symbol is inserted in the Edit window.
  5. Keep inserting the desired symbols by repeating steps 3-4, and close the Symbol dialog box by clicking Close.

Documents including Unicode symbols are properly displayed only when encoding is set as Unicode.

The Symbol dialog box remains open until you click Close.


Inserting comments

You can add a comment (description) to a document. The entered comment does not appear in the browser window and appears within the in the comment tag ("<!--" and "--"> tags) in the HTML tab.
  1. Select the [Insert > Comment...] menu command.
  2. In the Comment dialog box, enter the text you want to insert.
  3. Click OK.

The inserted comment is not displayed in the Edit window. You can make the special tag marks visible by selecting the [View > Marks > Special Tag Marks] menu command. The position where a comment is inserted is displayed as the special tag mark image [image] in the Edit window. If you double-click the image [image], you can view the comment text and modify or delete it.


Inserting equations

You can easily create or edit a mathematical formula to insert into the current document.
  1. Select the [Insert > Equation...] menu command.
  2. In the Equation dialog box, enter the equation using the equation and special symbol buttons.
  3. Adjust the size of the equation by clicking the magnifying glass icons and click OK.

The equations you have edited are inserted as images in the Edit window but their properties can be modified by double-clicking the image.

Example

    Let's insert the equation [image] in the Edit window.

  1. Select the [Insert > Equation...] menu command.
  2. In the Equation dialog box, click [image].
  3. Click [image] and insert 'k' with your keyboard, and press the down arrow key [image].
  4. Click [image] and insert 'j' with your keyboard, and press the right arrow key [image] or the space bar.
  5. Insert 'n' with your keyboard.
  6. Adjust the size of the inserted equation by clicking the magnifying glass icon [image].
  7. Click OK.


Inserting date/time

The current date and time can be inserted to the document in the selected format.
  1. Select the [Insert > Other > Date and Time...] menu command.
  2. In the Date/Time dialog box, choose the type of date/time format you want from the Available formats list box.
  3. Click OK and the date/time is inserted at the cursor location.

Namo WebEditor uses the date/time in your Windows system in inserting a date/time. If the wrong date is inserted, check the date/time in your Windows system.


Converting symbols to DBCS

If a document contains double-byte characters (such as Japanese or Chinese text) and the character set has not been correctly specified, the document will not be displayed correctly in a browser. You can use the Convert Symbols to DBCS command to turn illegible symbols into legible double-byte characters.

For example, if you receive an e-mail which contains illegible symbols, copy and paste its content into a new window in Namo WebEditor, select the content, and then select the [Tools > Change Character Format - Convert Symbols to DBCS] menu command. The content will now display correctly.


Viewing a document outline

[Window > Document Outline], <Alt + 3>,
You can view an outline of the current document using the heading tags in the document.

Viewing a document outline

If your document contains headings that use the standard HTML heading tags (<h1>, <h2>, etc.), you can view an hierarchical outline of the document by selecting the [Window > Document Outline] menu command. This will open a pane on the left side of the Edit window that shows each heading in an hierarchical outline, in which the position of each heading depends on its position and level within the document. Headings that use the <h1> tag are at the highest level; those that use <h2>, at the second level; etc.

The outline also shows lists that use the standard bulleted list (<ul>) and numbered list (<ol>) tags.

Initially, the outline is shown with all levels expanded. To collapse a level, click the minus sign to the left of the heading. Clicking an item in the outline directs the insertion point to the position of that item in the document.


Inserting non-breaking space

You can enter a Non-Breaking Space to insert consecutive spaces. According to HTML Recommendation of the World Wide Web Consortium(W3C), only one space is accepted as non-breaking space. However, you may sometimes enter consecutive spaces when working on a HTML document.
  1. To insert consecutive spaces, enter Non-Breaking Space (&nbsp), and then the spaces are maintained. You can insert '&nbsp' not only by selecting the [Insert > Other > Non-Breaking Space] menu command, but also by pressing the spacebar consecutively. When you press the spacebar, the first space is considered as a general blank, and only those from the second space entered are considered as non-breaking spaces.
  2. To insert a non-breaking space from the beginning, select the [Insert > Other > Non-Breaking Space] menu command.

Non-breaking spaces are represented with '&nbsp' tags in the HTML tab while the spaces between words are not represented in any tags.


Inserting a manual line break

[Insert > Line Break > Normal] , <Shift+Enter>,
A manual line break is used to start a new line without starting a new paragraph. To insert a normal line break, press <Shift+Enter> or select the [Insert > Line Break > Normal] menu command. You can also insert a manual line break with various options using [Insert > Line Break > All/Left/Right] menu command.

Use manual line breaks only when necessary; do not use them to end every line. Using the manual line break in every line makes the document layout awkward, for example, making some lines contain only a few characters, as you change the browser window size.


Previewing documents with Netscape or Internet Explorer

Although you can preview a document using Namo WebEditor's Preview tab (click the Preview tab at the bottom of the main window), you can also preview a document in an actual browser. Previewing in Netscape is especially a good idea, since Namo WebEditor's Preview tab uses the Internet Explorer engine, and Netscape often renders pages somewhat differently from Internet Explorer. This will help you to find any visual differences between browsers.

To see a document in Internet Explorer or Netscape, select the [View > View with Internet Explorer] or [View with Netscape] menu command. You can also use the shortcut key <F11> for Internet Explorer and <F12> for Netscape.

If you prefer to use a different Web browser, you can substitute the browser for either Netscape or Internet Explorer in the Browsers tab of the Preferences dialog box.


Viewing the document information

  1. Select the [File > Document Information...] menu command or press <Ctrl + F1>.
  2. In the Document Information dialog box, check Title, Author, Character set, Background color, Background image, Connection speed, resources, and etc.
  3. If you click the Modify..., the Document Properties dialog box appears. Specify the relevant items and click OK.

If you select Connection speed in the Document Information dialog box, you can check the loading time under the specified connection speed.


Changing the document encoding

You can change the encoding of Web documents.

  1. Select the [File > Document Properties...] menu command.
  2. Click the General tab in the Document Properties dialog box.
  3. Select the encoding you want from the Character set drop-down menu.

The default encoding in the Character set drop-down menu is the one specified in the Document Defaults tab of the [Tools > Preference...] menu. You can modify the default encoding in the Preference dialog box.

You can modify the encoding of all the files in a site at once. Simply select the [Tools > Change Character set...] menu command. In the Change Character Set dialog box, check Selected documents in the site and click OK.


Changing the document title

You can change the document title, which is displayed in the status bar of Web browsers.

  1. Select the [File > Document Properties...] menu command.
  2. In the Document Properties dialog box, click the General tab.
  3. Enter the title of the document in Title and click OK.

You can also modify the information on author, classification, description, keywords of your document at the General tab in the Document Properties dialog box.

You can easily modify the document title by double-clicking the document tab, which is located at the top of the Edit window, and entering the relevant title in the General tab of the Document Properties dialog box.


Changing keywords

Specifying keywords

If a Web site is registered with an Internet search service, the search robot visits the registered site and extracts the meta tags contained in the Web pages. The collected information is used as a database for the search engine. Thus you should specify relevant keywords so that various search engines can easily locate your Web site.

What is a meta tag?

Meta tags are often used to include keywords and a description of a document without making the keywords or description visible in a browser. This is a useful way to control how a document is summarized by some search engines.

Example: Setting keywords for the search engines

<head>
<title>Namo WebEditor</title>
<META name="description" content="Power that Opens Up the World of Internet, Namo WebEditor">
<META name="keywords" content="Namo WebEditor, WebEditor, Namo, Internet">
</head>

  • Description
    This is a brief description of the document, and can be used by search engines to provide a summary of the document in search results. Most search engines limit the length of the summary, so it's a good idea to keep the description to 150 words or less.
  • Keywords
    These are keywords that can be used by search engines to categorize and index the document. It is suggested that you repeat the main keywords at the beginning. There is also a limitation to the number of keywords. The limitation differs in various search engines, however most search engines allow up to 200 keywords.

Entering a summary and/or keywords

  1. Select the [File > Document Properties] menu command and click the General tab.
  2. Type a summary of the document in the Description text box.
  3. Type keywords for the document in the Keywords text box. You can type multiple keywords by separating each with a comma.
  4. Click OK.

Some search engines set the priority to the keywords included in your document title. In case there is no title in your document, the search engine regards the first sentence as a title. Thus, you should specify the document title for your Web page.

Some search engines do not use the keywords tag, instead indexing only the body of a document.

top


Printing documents

  1. Click Print [image] on the Standard Toolbar or select the [File > Print...] menu command.
  2. In the Print dialog box, specify the range and number of copies and click OK.

You can see a preview of how your document will appear when printed using the [File > Print Preview] menu command. This will open the Print Preview window.

You can specify paper size, margin, header/footer in the [File > Page Setup...] menu.

If you select the [View > Page Layout] menu command, the print paper is displayed in the Edit window, which enables you to edit the document while previewing the print copy. The paper size in this display is equivalent to the one specified in the Page Setup dialog box.


Viewing a page layout

[View > Page Layout],

Viewing a print layout

The Page Layout view shows how your document will look when printed. In page layout view, the document appears as a paper document on a gray background. The currently specified print margins are shown between the edge of the paper and the content. Red, dotted lines show where the page breaks will occur.

To adjust the paper size and print margins, use the Page Setup dialog box by selecting the [File > Page Setup...] menu command. You can control where page breaks occur using the [Format > Page Break > Insert Page Break] menu command. You can also set the properties of the page break by selecting the [Format > Page Break > Page Break Properties] menu command.


Setting the page setup

  1. Select the [File > Page Setup...] menu command.
  2. In the Page Setup dialog box, specify Paper, Orientation, Margin, Header/Footer and click OK.

Press <Ctrl+Enter> or select the [Format > Page Break > Insert Page Break] menu command. The page break will be inserted after a paragraph while the Page Layout option is automatically turned on.

Example

  1. Select the [File > Page Setup...] menu command.
  2. In the Page Setup dialog box, specify Paper, Orientation, and Margin.
  3. Specify Header/Footer. Click [image] and you can select the desired item from the list. You can insert different text on the left and the right side of Header/Footer. If you want to display nothing in Header/Footer, delete the default text in the Footer/Header text box.
    Delete the left header and enter '&page' in the text box on the right. Delete the left footer and enter '&date(&time)' in the text box on the right. Now the page number and date (time) are displayed at the top right and bottom right of the document, respectively.

  4. Specify Start page numbering at and the print-related options, such as Print background color and image, Print all text black, or Allow page breaks inside tables, and click OK.

You can preview how the Header/Footer will be printed by selecting the [File > Print Preview...] menu command.


Inserting page breaks

You can insert page breaks in your documents.

  1. Select the [Format > Page Break > Insert Page Break] menu command.
  2. To set the properties of the page break, select the [Format > Page Break > Page Break Properties...] menu command. In the Page Break dialog box, specify the position of page break and click OK.

To easily insert a page break, press <Ctrl+Enter>. The layout is automatically changed into Page Layout and a page break is inserted after a paragraph. The position where the page break is inserted is displayed as a red line in the Edit window.

To remove the page break you have inserted, select the [Format > Page Break > Page Break Properties...] menu command and select Auto in the Page Break dialog box.

Example

  1. Enter the contents you want in the Edit window.
  2. Place the cursor where you want to insert a page break and press <Ctrl+Enter>.
  3. The position where a page break is inserted is displayed as a red line in the Edit window.


Auto Correct dialog box

[Tools > Auto Correct...], <Shift+F7>

What is Auto Correct?

Number of items

Options

Comment

What is Auto Correct?

You can use the Auto Correct feature to automatically detect and correct typos, misspelled words, grammatical errors, and incorrect capitalization. For example, if you type "it;s", Auto Correct automatically replaces what you typed with "it's". Initially, the Auto Correct list contains over 1,000 corrections for the most common capitalization errors, typos, and spelling errors. You can also use Auto Correct to quickly insert commonly-used phrases without having to type them out. For example, you can add an Auto Correct item to replace "ni" with "Namo Interactive Inc."

Number of items

The number of items currently in the Auto Correct list appears at the top of the dialog box.
  • Add... button
    Click to add an item to the Auto Correct list.
  • Modify... button
    Click to modify the selected item.
  • Remove button
    Click to remove the selected item from the Auto Correct list.

Options

  • Enable auto correct
    Select this check box to enable Auto Correct.
  • Beep when correcting
    Select this check box to be notified with a beeping sound when an auto correction is performed.
  • Prompt when correcting
    If you enabled the Comment check box and entered a message in the text box in the Auto Correct Information dialog box for a certain item in the list, selecting this check box will cause the Confirm Auto Correct dialog box to be displayed before auto correction is performed for that particular word. If you deselect this check box, no confirmation dialog box will appear.

Comment

Displays the message that will appear in the Confirm Auto Correct dialog box for the selected item.

You can undo an auto correction by pressing <Ctrl+Z>.

top


Auto Correct Information dialog box

[Tools > Auto Correct... - Add.../Modify... button]

Auto Correct automatically replaces a word, partial word, or phrase that you type with another word, partial word, or phrase.

Replace text as you type

  • Replace
    Enter the word or phrase that will be replaced with the word or phrase that you enter in With. To replace only part of a word, two special symbols are available: '-' (hyphen) and '*' (asterisk).
  • With
    Enter the word or phrase that will replace the word or phrase that you entered in Replace. If replacing only part of a word, use the same special symbol that was used in Replace.

    SYMBOL | POSITION | EXAMPLE
 |  | Replace | With | Result
- (hyphen) | BEFORE | -tan | -flower | "suntan" is replaced with "sunflower" "tan" by itself is not replaced
 | AFTER | foot- | basket- | "football" is replaced with "basketball" "foot" by itself is not replaced
 | BEFORE AND AFTER | -late- | -love- | "belated" is replaced with "beloved" "late" by itself is not replaced
* (asterisk) | BEFORE | *tan | *flower | "suntan" is replaced with "sunflower" "tan" is replaced with "flower"
 | AFTER | foot* | basket* | "football" is replaced with "basketball" "foot" is replaced with "basket"
 | BEFORE AND AFTER | *late* | *love* | "belated" is replaced with "beloved" "late" is replaced with "love"

Comment

If this check box is selected and a message is entered in the text box, the message will appear in the Confirm Auto Correct dialog box before the auto correction is performed. If Prompt when correcting is disabled in the Auto Correct dialog box, no confirmation dialog box will appear, but the comment will appear in Namo WebEditor's status bar immediately after the auto correction is performed.

Enable this item

Leave this check box selected to enable the item. Deselect it to disable the item.

Automatically adding a hyperlink to a word

The special symbol @ can be used to specify that a hyperlink should be created whenever a certain word is typed. To use this feature, enter the word preceded by @ in Replace (example: @index page). In With, enter the hyperlink (example: http://www.mysite.com/index.htm). Now, whenever you type '@index page', the hyperlink 'http://www.mysite.com/index.htm' will automatically be created on the words 'index page'.

top


Change Case dialog box

[Tools > Change Character Format > Change Case...], Change Case

You can change the case of the selected text.
  • Sentence case
    Capitalizes the first letter of each sentence, changing all other letters to lowercase.
    Example: Namo WebEditor becomes Namo webeditor
  • Lower case
    Changes all letters to lowercase.
    Example: Namo WebEditor becomes namo webeditor
  • Upper case
    Changes all letters to uppercase.
    Example: Namo WebEditor becomes NAMO WEBEDITOR
  • Title case
    Capitalizes the first letter of each word, changing all other letters to lowercase.
    Example: Namo WebEditor becomes Namo Webeditor
  • Toggle Case
    Changes uppercase letters to lowercase and lowercase letters to uppercase.
    Example: Namo WebEditor becomes nAMO wEBeDITOR.

You can see the preview of the selected text as each option is selected in the Sample box on the right.


Change Character Width dialog box

[Tools > Change Character Format > Change Character Width...]

Changes half-width Asian characters to full-width, and vice versa.

Change to

  • Full-width
    Changes half-width characters to full width.
  • Half-width
    Changes full-width characters to half width.

Target

Selects the types of characters to apply the change to.

This command is used for Asian text only. It is not applicable to Western text.

This command acts on a text selection. Some text must be selected before using this command.


Choose Folder dialog box

[File > Save - Copy Resource Files - Choose Folder... button], Save - Choose Folder... button

Click to choose the folder to which the selected files will be copied.
  • New button
    Creates a new folder, to which the selected files will be copied.
  • Delete button
    Deletes the selected folder. (Files in the folder will also be deleted.)
  • Rename button
    Renames the selected folder.


Comment dialog box

[Insert > Comment...], Comments...

Inserts a comment at the current location in the document. Comment appears in the HTML source only; they are not visible in a browser.

Inserting a comment

Type the comment into the large text box and click OK. The comment will be inserted into the HTML source at the location of the insertion point, surrounded by comment tags ('<!--' and '-->' ).

If you enable special tag marks by selecting [View > Marks > Special Tag Marks] from the menu, the special tag mark ( [image]) will appear at the location where the comment is made. Double-click the special tag mark ( [image]) to open the Comment dialog box where you can view, modify or delete the comment.


Confirm Auto Correct dialog box

Confirms whether to replace the text with the Auto Correct text. Deselect Always show this dialog box before replacing to apply the Auto Correct item automatically without opening this dialog box.

For detailed information on specifying the Auto Correct item, see Auto Correct.


Convert Hiragana/Katakana dialog box

[Tools > Change Character Format > Convert Hiragana/Katakana...]

Changes Japanese text from Hiragana to Katakana or vice versa.
  • Hiragana -> Katakana
    Changes the selected text from Hiragana to Katakana.
  • Katakana -> Hiragana
    Changes the selected text from Katakana to Hiragana.

This command is used for Japanese text only. It is not applicable to non-Japanese text.

This command acts on a text selection. Some text must be selected before using this command.


Copy Format dialog box

[Edit > Copy Format...], <Shift + F2>, Copy Format...

Attributes to copy

  • Character attributes
    Copies all character attributes, such as font, size, style, color, and all others that can be assigned in the Character Format dialog box.
  • Paragraph style
    Copies all paragraph attributes, such as alignment, line height, style, and all others that can be assigned in the Paragraph Format dialog box.
  • Font color
    Copies only the font color. If Character attributes is selected, the font color is copied regardless of the state of this check box.
  • Background color
    Copies only the background color. If Character attributes is selected, the background color is copied regardless of the state of this check box.
  • Table properties
    Copies the properties of the table containing the cursor. These are all the properties that can be assigned in the Table tab of the Table Properties dialog box, and can only be pasted into another table.
  • Cell properties
    Copies the properties of the table cell containing the cursor. These are all the properties that can be assigned in the Cell tab of the Table Properties dialog box, and can only be pasted onto another table cell.
  • Hyperlink
    Copies the hyperlink at the insertion point.
  • Bookmark
    Copies the bookmark at the insertion point.
  • Image layout
    Copies the layout attributes of the selected image. These are all the properties that can be assigned using the Style... button of the Image Properties dialog box, and can only be pasted onto another image.
  • Chart type
    Copies the chart-specific attributes of the selected chart. These are all the properties that can be assigned in the Chart Properties dialog box, except values. These attributes can only be pasted onto another chart.
  • All attributes
    Copies all the attributes of the item at the insertion point (or the selected item).

The Copy Format... command is not available if there is a text selection. Before using the command, simply place the cursor within the item whose attributes you wish to copy; do not select the item. To copy the attributes of an image or chart, click the image or chart so that its resize handles are visible, then use the Copy Format... command.

top


Copy Resource Files dialog box

(when saving a document after inserting files) [File > Save], <Ctrl + S>, Save

Why does Namo WebEditor offer to copy resource files?

When you insert a resource file (such as an image file) from your hard drive into a Web document, the resource itself doesn't actually get inserted into the document. Rather, Namo WebEditor (like all Web authoring tools) creates a link to the resource file and inserts the link into the document. Depending on how you specify the location of the resource file, this link can be in the form of a relative path (such as 'images/fish.gif'), an absolute path (such as 'C:\My Documents\images\fish.gif'), or a URL (such as 'http://www.namo.com/logo.gif').

Using an absolute path is good for telling Namo WebEditor where to find a resource file, but if you don't convert the absolute path to a relative path before publishing the document to a Web site, problems will arise. Your site visitors won't be able to load the resource file, because their Web browsers will look for the resource file on the visitors' own hard drives, rather than on the Web site.

To help avoid this problem, when you save a document after inserting resource files, Namo WebEditor offers to copy the resource files into the same folder that contains the document. If you allow it to do so, it will also convert any absolute paths into relative paths. Allowing Namo WebEditor to copy the resource files has two benefits: first, publishing your document will be easier, since all the resource files used in the document will be in the same folder as the document itself; second, the conversion of absolute paths to relative paths will ensure that your site visitors' Web browsers will be able to find the resource files on your Web site. Therefore, it's always a good idea to let Namo WebEditor copy inserted resource files.

Using the Copy Resource Files dialog box, you can save resource files inserted in the document into a designated folder.

  • Filename
    Shows the name of the resource files, such as image and multimedia files.
  • Relative Path
    Shows the folder where the file is currently located.
  • Save
    Saves the selected files in the designated folder.
  • Select All button
    Selects all the resources inserted in the current document.
  • Rename button
    Renames the selected resource file.
  • Choose Folder...button
    Click to choose the folder to which the selected files will be copied.

You can check the Original path and the New path of the selected resource file right under the resource file list.

top


Date/Time dialog box

[Insert > Other > Date/Time...],

Inserts the current date and time in the selected format.

Available formats

Select a date/time format from the list box and click OK to insert the current date and/or time at the insertion point.

The Date/Time is inserted as static text; it does not update like a clock.


Document Information dialog box

[File > Document Information...], <Ctrl+F1>, Document Information

Displays information about the current document.
  • Title
    Shows the title of the document. Click the Modify... button to modify in the General tab of the Document Properties dialog box.
  • Author
    Shows the author of the document.
  • Character set
    Shows the character set of the document. Click the Modify... button to modify this in the General tab of the Document Properties dialog box.

    • If characters of a certain page are unreadable and appear absurd, it is likely that the encoding defined for the document is not properly specified.

  • Background color
    Shows the Background color of the document. If the background color is one of the 16 standard Web colors, the color will be shown by name and hex value, such as "Yellow (#FFFF00)". If it is not one of the 16 standard colors, the color will be shown as an RGB value, such as "RGB (204,255,204)". Click the Modify... button to modify the color in the Appearance tab of the Document Properties dialog box.
  • Background image
    Shows the path or URL to the document's background image, if any. Click the Modify... button to modify in the Appearance tab of the Document Properties dialog box.
  • Total size
    Shows the total size of the document and all its resource files. (Resource files include images, sounds, movies, Java applets, etc.)

    • Since all files are transmitted over the Internet in packets, the total size shown here may be greater than the sum of all individual file sizes.

  • Connection speed
    Allows for selection of a connection speed from the drop-down menu. The estimated transfer time of the document and all its resources will be displayed in Transfer time. The default value is 56 Kbps.
  • Transfer time
    Shows the estimated time to upload or download the document and all its resources.
  • Resources
    Lists the paths and sizes of all the resources used in the document.

top


Document Inspector

Document Inspector shows properties of the current document such as the title, author, and class. You can change properties of the document in the Document Inspector without opening a dialog box. Press <Enter> or simply move the focus elsewhere to apply the modification.

  • CharSet
    Specify the character set of the document.
  • Title
    Enter a title for the document. This title will be shown in the title bar of Web browser.
  • Author
    Enter the author information. You can also edit this information in the Document Defaults tab of the Preferences dialog box.
  • Keywords
    Enter the keywords for the document. These words may be used by Internet search engines to identify the document as relevant to a particular category or search query.
  • Text
    Specify the color of the text. Click the Color Picker Pop-up [image] icon to select the color. Default color is black.
  • Hyperlink
    Specify the color for hyperlinks. Click the Color Picker Pop-up [image] icon to select the color. Default color is blue.
  • Visited link
    Specify the color for visited links. Click the Color Picker Pop-up [image] icon to select the color. Default color is purple.
  • Active link
    Specify the color for active links. Click the Color Picker Pop-up [image] icon to select the color. Default color is red.
  • Bg
    Enter the path and filename of the image for the background image. Click Browse... to locate an image file in the Open dialog box.
  • Background color
    Specify the color for background color. Click the Color Picker Pop-up [image] icon to select the color. Default color is white.


Document Properties dialog box - General tab

[File > Document Properties - General tab], Double-click Document tab, {Document Properties - General tab}, <Ctrl + F2>, Document Properties

Various document properties such as the title, the author, keywords, and language encoding can be specified.
  • Location
    Specifies the location of the document. Usually, this is a location on your local drive. For newly created documents that have not yet been saved, this field is blank. If the document was imported from the Web but not saved to your local drive, the location is the URL from which the document was imported. This field cannot be edited. To change the location of a document, use the [File > Save As...] menu command.
  • Base Location
    Specifies the base location or URL for the document. This is used by Namo WebEditor and by Web browsers to calculate complete URLs from any relative URLs found in the document. For instance, if the document's base location is "http://www.bigcompany.com" and the document contains a hyperlink using the relative URL "products/widget.html", then the complete URL is "http://www.bigcompany.com/products/widget.html". Normally, the base location should be left unspecified, so that relative URLs will refer to the directory that the document is in.
  • Title
    Specifies the document's title, as it appears in the title bar of a Web browser.
  • Author
    Specifies the name of the document's author, or any other information regarding authorship. If you enter a name in the Document Defaults tab of the Preferences dialog box, under Information - Author, that name will be used as the default author name in all new documents.
  • Classification
    Information that might be used to classify the document can be entered here.
  • Description
    A brief description of the document's contents or purpose can be entered here. This information may be used by Internet search engines to find relevant documents in a particular category or that match a search query.
  • Keywords
    Words separated by commas may be entered, that may be used by Internet search engines to identify the document as relevant to a particular category or search query.

    • If a document is not entitled, some search engines consider the first sentence of the document as it's title. Therefore we recommend you to entitle documents.

  • Character set
    Choose a language encoding (also called "character set") for the document from the drop-down menu. The corresponding HTML code is displayed in the text box on the right. The default character set is "(user-defined)", meaning the document will use whatever character set has been set up as the default in a browser.

    • Web browsers use the character set specification in a document to determine how the document should be displayed. If a document contains non-Western text, such as Chinese, you should specify the appropriate language encoding for the document, such as "Chinese Traditional". If you don't specify the language encoding, Web browsers may attempt to display non-Western text using the Western character set, rendering it illegible.

  • Default target frame
    If the document is part of a frameset, this specifies the default target frame for links in the document. That is, when a site visitor clicks on any link in the document, the document which the link points to will load in the specified frame (unless the link itself specifies a different target frame).

Before displaying the contents, a Web browser will encode a document with the encoding type defined for the document. If characters of a certain document are unreadable, it is likely that the character set defined for the document is not English.

top


Document Properties dialog box - Appearance tab

[File > Document Properties... - Appearance tab], Double-click Document tab - Appearance tab, {Document Properties - Appearance tab}, <Ctrl + F2>, Document Properties

Colors

Background image

Colors

Each color can be specified either by selecting it from a drop-down Color Pop-up or by entering the hexadecimal HTML code directly.
  • Import Colors... button
    Imports all the document properties from the selected file and applies them to the current document.
  • Background
    Specifies the background color of the document. The default is white. If a background image is also specified, the image takes precedence.
  • Text
    The default text color for the document. This default may be overridden for particular blocks of text by assigning them a color on the formatting toolbar or the Character Format dialog box. The default value is black.
  • Hyperlink
    The color of normal, unvisited hyperlinks. The default is blue.
  • Visited link
    The color of visited hyperlinks. The default is purple.
  • Active link
    The color of active hyperlinks. In Web browsers, a link becomes active when you click on it without releasing the mouse button, as when dragging it to another window; or when you 'tab' to it. The default color is red.

Background image

Enter the URL or file path to an image file to use as the document's background. The image will be tiled to fill the document.

Click Browse... to select an image file on your local drive.

Click Clip Art... to select an image from the Clip Art tab in the Resource Manager.

Click Site... to select an image file saved in the current site (available only when working on a project).

If the area of the background image is smaller than that of the document, it will repeatedly be arrayed to fill up the page.

top


Document Properties dialog box - Advanced tab

[File > Document Properties - Advanced tab], Double click Document tab - Advanced tab, {Document Properties - Advanced tab}, <Ctrl + F2>, Document Properties

Refresh page

HTTP cache control

PICS

Refresh page

After the current document has been loaded in a browser, you can specify whether the browser should automatically load another document, or reload the same document, after a certain amount of time.

  • URL to jump to
    Specifies the URL of the document that browsers should load after loading the current document. If you want browsers to reload the current document, enter the current document's filename.
  • Delay time
    Specifies the number of seconds to wait before automatically loading the specified document.

    • You should choose a delay time no shorter than the time it takes for the current document to finish loading with a slow Internet connection. Otherwise, the new document may start loading before the current document has finished loading.

HTTP cache control

  • Expires on
    Specifies a date and time after which the document is reloaded from your web server, rather than using a cached copy.
  • Sample Date button
    Shows a sample format of the expiration date in the text box.

Platform for Internet Content Selection (PICS)

The PICS specification enables labels (meta data) to be associated with Internet content. This was originally designed to help parents and teachers control children's access on the Internet, but it also facilitates other uses for labels, including code signing and privacy. If you are interesting in learning more about PICS, visit www.netparents.org.

  • Labels
    Enters a label in the text box. Text entered here will be inserted in the <head> tag of the HTML code inside the<meta http-equiv="PICS-Label" content=""> tag (within the double quotation marks following content=).

top


Document Properties dialog box - Styles tab

[File > Document Properties - Styles tab], Double-click Document tab, {Document Properties - Styles tab}, <Ctrl + F2>, Document Properties

Margins

Advanced page effects

Background sound

Margins

  • Left
    Sets the value of the left margin in pixels for the entire document. All content in the document will start after the specified margins.
  • Top
    Sets the value of the top margin in pixels for the entire document. All content in the document will start after the specified margins.

Advanced page effects

A transition effect can be specified and will be displayed when site visitors enter or exit the document. (These effects only work with Internet Explorer.)
  • Event
    Selects when the effect should appear. You can set a different effect for each of the four events.
  • Effect
    Selects the transition type from the drop-down list.
  • Duration
    Specifies the length of the transition effect in seconds.

Background sound

You can set a background sound for the document. (This effect only works with Internet Explorer.)
  • Path
    Enter a URL or path to a sound file, or click Browse... to select a sound file from your local drive. The sound can be previewed by clicking Play [image].
  • Repeat
    Specifies the number of times the sound should repeat upon loading the document.
    Click Repeat forever to loop endlessly.
    Click the [image] button to play background sound.
    Click the [image] button to stop playing the background sound.
  • Insert Style in the <BODY> Tag... button
    Opens the Style dialog box, where the settings for CSS style tags for the whole document can be entered.

top


Document Properties dialog box - <META> Element tab

[File > Document Properties - <META> Element tab], Double-click Document tab - <META> Element tab, {Document Properties... - <META> Element tab}, <Ctrl + F2>, Document Properties

System variables (HTTP-EQUIV)

User variables

System or user variables for the current document can be entered.

System variables

System variables are used to create HTTP response headers, which are used by Web browsers and Web servers for various purposes.
  • Add... button
    Adds a system variable to the list.
  • Modify... button
    Modifies the system variable of the selected item.
  • Remove button
    Removes the selected item from the system variable list.

Systems variables are used when creating a HTTP response header which is used by Web browser and/or Web server.

Adding a system variable

  1. Click the Add... button.
  2. Enter the name and value in the System Meta Variable (HTTP-EQUIV) dialog box and click OK.

Modifying a system variable

  1. Select an item from the System Variable list box and click the Modify... button.
  2. Change the name and/or value in the System Meta Variable (HTTP-EQUIV) dialog box and click OK.

Removing a system variable

  1. Select an item from the System variables(HTTP-EQUIV) list box.
  2. Click the Remove button.

User variables

Use this to add, modify, or remove user variables created for CGIs or other programs.
  • Add... button
    Adds a user variable to the list.
  • Modify... button
    Modifies a user variable of the selected item.
  • Remove button
    Removes the selected item from the system variable list.

User variables, used for CGIs or other specific programs, are not recognized by general HTTP or Web browsers. For example, the user variable 'generator' refers to the name of the program used to make the document.

Adding/Modifying/Removing User variables

  1. To add a user variable, click Add... and enter the name and value in the User Meta Variable dialog box.
  2. To modify or delete a user variable, select it from the User variables list box and click the Modify... or Remove button.

top


Equation dialog box

[Insert > Equation...], Equation

Visual tab

Script tab

Visual tab

Entering an equation visually

Using the Visual tab of the Equation dialog box, you can enter an equation by simply typing it into the text box. Use the buttons above the text box to enter special mathematical symbols. Most of the buttons reveal drop-down menus that show several related symbols; select an item from the menu to insert it.

Use the magnifying glass icon in the first row of buttons to increase or decrease the visual size of the equation.

To exit superscript or subscript mode, press the space bar or the right arrow key.

Script tab

Entering a equation using TeX

Using the Script tab, you can enter or edit an equation in TeX, a standard language for entering mathematical formulas.

TeX example

The TeX notation corresponding to the equation above is:

\Phi_{\alpha}(x,y) = \int_{X}

\frac{Q_{n}(x, y) - P_{n}}

{1 + N_{\epsilon}(x,y)\Phi_{\epsilon}}\,d\nu

Once you exit the Equation dialog box by clicking OK, Namo WebEditor generates a bitmap image and places it in the current document at the insertion point. You can edit the equation by double-clicking the image. Unlike other images, you cannot resize an equation by using the resize handles that appear around the selected image. To resize an equation, double-click it and use the magnifying glass icons in the Equation dialog box.

When you save the document containing the equation, the bitmap image is saved as a GIF file using the following naming convention: [filename]_[ext]_eqn[#].gif, where [filename] is the name of the document, [ext] is the file extension (usually 'htm' or 'html'), and [#] is a number such as 1, 2, 3, etc. The first equation inserted into the document is numbered 1; the second, 2; etc. For example, the GIF file for the third equation in a document named 'physics.html' would be named 'physics_html_eqn3.gif'. The GIF file is saved into an 'images' folder in the same folder as the document. (The folder is created if necessary.)

If you need to move the GIF image file of an equation to a different folder, you must edit its path in the source of the containing document. Open the document containing the equation, click the equation once to select it, and press <F6>, or use the HTML tab at the bottom of the window, to switch to HTML source view. The cursor will be in the line containing the <img> tag for the equation's image. Locate the image path, which is contained within double quotes following 'src='. Replace the string 'images' with the new path. Then move the GIF image file to the new location.

top


External File Import Options dialog box

[File > Open... - Select (*.hwp, *.doc, etc.) in Files of Type]

Specifies options for importing Microsoft Word (*.doc), Araea Hangul (*.hwp), or other file types.

Filename

Shows the path and name of the file selected in the Open dialog box.

Import options

When you import a Microsoft Word or Araea Hangul document, Namo WebEditor must convert the proprietary formatting codes used by those programs into standard HTML and CSS tags. The options in this section control the kinds of tags that will be used to preserve the original document formatting.
  • Keep original format (difficult to edit)
    Preserves the format of the original document using both <FONT> tags and CSS styles.
    This option imports the document as faithfully as possible, but the HTML source of the imported document may be difficult to edit, due to the large number of tags that are generated in order to preserve the formatting.
  • Use <FONT> tags only
    Uses only <font> tags when converting the formatting codes in the original document. CSS tags will not be used. This option sacrifices some faithfulness to the formatting of the original document in favor of cleaner HTML code.
  • Import text only (easy to edit)
    Imports only the text of the original document. All formatting information (except for tables, paragraph breaks, and line breaks) will be discarded. This option creates the cleanest HTML source, but most formatting information is lost.
  • Use CSS Properties
    Select to use CSS tags when importing the document.
  • Use <FONT> tags
    Select to use <font> tags when importing the document.

The two check boxes simply provide another way to specify how the document will be imported. No additional functionality is offered.


Find/Replace dialog box

[Edit > Find...], [Edit > Replace...], <Ctrl+F>, <Ctrl+H>, [image],

Find

Replace with

Options

Direction and Range

Buttons

Specified text can be found in the current document or all open documents, optionally replacing the found text with other specified text.

Find

Enter the text you wish to locate, or use the drop-down menu to select from strings used in previous Find operations.

Replace with

Enter the text that will replace the Find text, or use the drop-down menu to select from strings used in previous Replace operations. If you used the [Edit > Find...] command rather than [Edit > Replace...] to open this dialog box, you can enable the check box here to enter replacement text.

Options

  • Match case
    Searches only for occurrences that have the same case as the specified Find text.
    Example: If the Find text is 'Interactive', 'interactive' will be ignored.
  • Match whole words only
    Searches only for whole-word occurrences of the Find text.
    Example: If the Find text is 'ball', 'football' will be ignored.
  • Match in hyperlinks only
    Searches for occurrences of the Find text in hyperlinks only.
  • Match full-/half- width
    Distinguishes between full-width and half-width Asian double-byte characters. (Not used when searching for Western text.)

Direction and Range

  • Up
    Searches upward starting from the current insertion point. Searching stops when the top of the document is reached.
  • Down
    Search downward starting from the current insertion point. Searching stops when the bottom of the document is reached.
  • Start at top of document
    Starts searching from the top of the document, regardless of the location of the current insertion point. (The entire document will be searched.)
  • Search all open documents
    Searches all open documents, including the current document. Searching begins with the document that was opened first.

Buttons

  • Find Next
    Searches for the next match of the text entered in the Find text box. To continue searching, click Find Next.
  • Replace
    Replaces the found text with the text in the Replace with text box.
  • Replace All
    Replaces all found texts at once. All the text entered in the Find text box will be replaced with the text specified in the Replace with text box.
To repeat the most recent search, use the [Edit > Find Again] command or press <F3>. The same Find text, options, direction, and range will be used.

top


Horizontal Line Inspector

When you insert a horizontal line in the document, Horizontal Line Inspector will be activated. You can change properties of the horizontal line in the Horizontal Line Inspector without opening a dialog box. Press <Enter> or simply move the focus elsewhere to apply the modification. Horizontal Line Inspector consists of the same properties as the Horizontal Line Properties dialog box.

  • Width
    Sets the length of the horizontal line in pixels or as a percentage of the browser window width.
  • Height
    Sets the thickness of the horizontal line in pixels.
  • Align
    Sets the location of a horizontal line to Left, Center or Right by clicking the relevant icon. This is applied only when the width of the line is less than 100% of the window width. The default is Center.
  • Solid line (no 3D effect)
    Disables the default 3D effect applied to the line. The line will appear as a solid bar.
  • Color Picker Pop-up icon
    Sets the color of the horizontal line. (This function works only in Internet Explorer.)


Horizontal Line Properties dialog box

[Format > Horizontal Line Properties...], {Horizontal Line Properties}, Double-click the horizontal line, Select horizontal line - <Alt + Enter>

A horizontal line is often used to separate sections on a Web page.

Size

  • Width
    Sets the length of the horizontal line in pixels or as a percentage of the browser window width.
  • Height
    Sets the thickness of the horizontal line in pixels.

Alignment

Sets the location of a horizontal line to Left, Center or Right. Only applies if the width of the line is less than 100% of the window width. The default is Center.

Style

  • Color
    Sets the color of the horizontal line. (This function works only in Internet Explorer.)
  • Solid line (no 3D effect)
    Disables the default 3D effect applied to the line. The line will appear as a solid bar.


Import from Web dialog box

[Tools > Import from web...],

URL

Status

URL

The list box at the top of the dialog box lists all the URLs of Web sites that you have set up for importing.
  • Add... button
    Click to add a new Web site to the import list. Opens the Import Properties dialog box, where you must specify the URL of the site and set various import options.
  • Modify... button
    Click to open the Import Properties dialog box, where you can edit the import settings of the selected site.
  • Remove button
    Removes the URL from the import list.

Status

Shows the status of the current import session. Namo WebEditor imports Web sites using up to ten threads (processes) at a time. The status box shows the path of the file currently being downloaded in each thread.
  • Import... button
    Click to start importing the selected site.
  • Stop button
    Click to stop importing the selected site while importing is in progress.
  • Close button
    Closes the Import from Web dialog box.


Import Properties dialog box - General tab

[Tools > Import from web > Import from web... - Add...button],

You can enter the URL of a Web site to import and specify general import options.
  • URL to import from
    Enter the base URL of the Web site to import. For example, 'http://www.namo.com/'. If you want to import only part of a site, enter a base URL such as 'http://www.namo.com/products/' and make sure to select the option Don't follow external links.
  • Store in folder
    Specifies the folder in which to store the imported site. You can type the path or click [image] to locate and select a folder.
  • Download images
    Select this option to download image files as well as HTML documents. If the site has many large images, selecting this option can slow the import considerably.
  • Download images from other Web sites
    Some Web sites link to images that are stored on other sites. Select this option if you want to download these images.
  • Don't follow external links
    If you select this option, documents whose URLs do not contain the base URL (entered in URL to import from) will not be imported. For example, if the base URL is 'http://www.namo.com/products/', a document whose URL is 'http://www.namo.com/support/faq.html' will not be imported.
  • Depth
    Specifies the depth to which links should be followed while importing the site. The default value of 10 is sufficient to import all but the largest, most complex sites.

    • To understand the meaning of link depth, think about "surfing" a Web site. You might start at the site's index page, click a link to go to another page, then another, and so on. When you have clicked ten links, your "trail" of links has reached a link depth of 10. This is true even if, at the end of the trail, you wind up back at the index page. However, there may be many possible trails that are ten links deep. If you specify a link depth of 10 for importing a Web site, Namo WebEditor will follow every trail of links up to a depth of 10, then stop.

  • Download all files
    Select this option to download all files, even if some of the files have already been downloaded from the site.
  • Skip previously imported files
    If you select this option, files that were already downloaded from the site in a previous import will not be downloaded again.

After importing is completed, you can surf the site offline using the downloaded files.

Importing a large site for the first time, especially if it has many large images, can take a prohibitive amount of time. To keep the import time reasonably short, consider specifying a smaller Link depth or deselecting Download images.

top


Import Properties dialog box - Authentication tab

[Tools > Import from Web... - Add...button],

You can enter login information for a Web site that requires logging in (when importing the site).

Account Information

  • User ID
    Enter the ID of your account. Some sites require authentication before importing.
  • Password
    Enter your password to log in to the Web site.
  • Verify password
    Enter your password again.


Import Properties dialog box - Advanced tab

[Tools > Import from Web... - Add...button - Advanced tab],

Restrictions

Do not change links

File types to include or exclude

Extension

Advanced options for importing a Web site can be set.

Restrictions

Use these settings to limit the amount of space on your hard drive an imported site will consume, or to reduce the time it takes to import a site.
  • Maximum file size
    Select this option to set a maximum file size. Larger than specified files will not be downloaded. (The default value is 10000 KB.)
  • Total size of files to import
    Select this option to set a maximum total size of files to import. When the total size of imported files reaches this limit, the import will stop. (The default value is 10000 KB.)
  • Maximum number of files to import
    Select this option to set a maximum number of files to import. When the number of imported files reaches this limit, the import will stop. (The default value is 10000 files.)

Do not change links

When Namo WebEditor imports a document from the Web, it also downloads any resource files, such as images, that are used by the document. By default, it also changes all resource links that are in the form of a URL (such as 'http://www.mysite.com/images/fish.jpg') to relative links (such as 'images/fish.jpg'). If you don't want Namo WebEditor to change such links, select this option.

File types to include or exclude

  • Download all files
    Select this option to download all files regardless of their extensions.
  • Download files with these extensions only
    Select this option to download files with the extensions in the list box on the right.
  • Do not download files with these extensions
    Select this option to prevent downloading files with the extensions in the list box on the right.

Extension

The list box shows the extensions for file types that will be included or excluded. To enter a new extension, type the extension in Extension and click the Add>> button. To remove an extension, select it from the list and click the Remove<< button.

top


Line Break Properties dialog box

{Line break shortcut menu > Line Break Properties...}, <Alt + Enter>

Specifies the type of manual line break to insert.
  • Normal line break
    The same as inserting an ordinary line break using <Shift+Enter>.
  • Clear left margin
    Starts a new line with no left margin. If an image has been inserted within a paragraph whose alignment is set to left, (with the text flowing around the image to the right), then inserting a line break in one of the lines to the right of the image with the Clear left margin option will cause the following line to start below the image.
  • Clear right margin
    Starts a new line with no right margin. If an image has been inserted within a paragraph whose alignment has been set to right, (with the text flowing around the image to the left), then inserting a line break in one of the lines to the left of the image with the Clear right margin option will cause the following line to start below the image.
  • Clear both margins
    Starts a new line that has no margins on either side. If two images have been inserted into a paragraph, and the alignment of one image has been set to left, and the alignment of the other set to right, (with the text flowing between the two images), then inserting a line break in one of the lines between the images with the Clear both margins option will cause the following line to start under the two images.


Make Table of Contents dialog box

[Window > Document Outline - Document Outline shortcut menu > Make Table of Contents...]
Creates a table of contents for the current document and inserts it at the top of the document.

If the current document contains headings using the standard HTML heading tags (<H1>, <H2>, etc.), this command can be used to automatically generate a simple table of contents listing each heading. Each item in the table of contents can optionally link to the corresponding heading. The table of contents will be inserted at the top of the document.

  • Create hyperlinks to the contents
    If this option is selected, each item in the TOC will link to the corresponding heading in the document, if there is a bookmark on the heading. To have Namo WebEditor automatically create bookmarks on each heading where one doesn't already exist, select Insert bookmarks when making hyperlinks in addition to this option.
  • Insert bookmarks when making hyperlinks
    If this option and Create hyperlinks to the contents are both selected, Namo WebEditor will automatically create bookmarks on the headers in the document so that the TOC items are linked to them.
  • Indent
    Specifies the number of spaces to insert in front of TOC items that refer to second-level headings (<H2>). Items that refer to third-level headings will be indented with twice the specified number of spaces; items that refer to fourth-level headings will be indented with three times the number of spaces, etc.


Open dialog box

[File > Open...], <Ctrl + O>,

You can select a document on your local drive, your local network, or from the Internet to open in the Edit window. The Open dialog box is used not only to open a document in the Edit window, but also in many places where you click Browse... in a dialog box to select a file.
  • Look in
    Displays the name of the current folder or drive. Click to select a different drive from the drop-down menu. The files and sub-folders in the current folder or drive are shown in the file list.
  • Filename
    Contains the name of the selected file in the file list, if any. A filename can also be entered directly.
  • Files of type
    Controls what kinds of files appear in the file list. Select a file type from the drop-down menu, or select All files to show all types of files.
  • URL
    If the file you want to open is located on the Internet, enter its URL here and click the Open URL button. You must have an active Internet connection to use this feature. Click the drop-down menu to show a list of previously entered URLs.

Click the Open button to open the selected file with Namo WebEditor.

Click the Cancel button to close the dialog box without opening any files.

Some Web documents cannot be opened using this method. If the specified Web document fails to open, use the [Tools >Import from Web...] menu command to import the document.

top


Open File As dialog box

[File > Open > select a text file (*.txt) and click Open], Open

File name

Open as

Encoding

Specifies options for importing plain text files (*.txt).

Filename

Shows the location and filename of the text file to be imported.

Open as

Select an import option from the choices below.
  • Text (line)
    Opens the file regarding each line of text as a paragraph.
  • Text (paragraph)
    The program will make logical guesses about which line breaks in the text file should be treated as paragraph breaks, and which should be treated as "soft" breaks (as in soft wrapping).
  • HTML
    The text file will be treated as an HTML file (as if it had a .htm or .html extension).
  • Preformatted text
    Select this to open the text file with no alterations.

Character set

Specifies the character set to use for the imported document. Click the drop-down menu to select a characters set. The HTML code for the selected character set will be shown on the right.

top


Pack/Unpack MIME HTML file dialog box

[Tools > External Programs > Pack/Unpack MIME HTML file...]

A web document and all its resource files can be "packed" into one MIME HTML file.

Pack MHTML file
Use this section of the dialog box to pack an HTML file and its resource files into a single MIME HTML file.

  • Get HTML file from
    Enter the path or URL to the HTML document to pack (along with its resource files) into an MHTML file. This can be entered manually, or you can click the Browse... button to locate and select a document on your hard drive.
  • Create MHTML file in
    Enter the path to the folder in which to store the MHTML file. This can be entered manually, or you can click the Browse... button to locate and select a folder.

Unpack MHTML file
Use this section of the dialog box to unpack a MIME HTML file into its constituent HTML and resource files.

  • Get MHTML file from
    Enter the path or URL to the MHTML document to unpack. This can be entered manually, or you can click the Browse... button to locate and select a folder.
  • Unpack component files to
    Enter the path to the folder in which to save the files unpacked from the MHTML file. This can be entered manually, or you can click the Browse... button to locate and select a folder.

In order to view an MHTML file without unpacking it, the Web browser must support MHTML.

The Microsoft Office 2000 Web Archive Add-on must be installed in order to use these MHTML functions. Please visit http://officeupdate.microsoft.com/2000/downloadDetails/webarchive.htm to download it.


Page Break dialog box

[Format> Page Break > Page Break Properties...]

Page break before

Page break inside

Page break after

Setting a page break

Using the Page Breaks dialog box, you can force a page break to occur before or after the current paragraph (the paragraph containing the cursor). Page breaks have no effect on how a document is displayed on screen; they only affect how the document is paginated when printed.

To force a page break before or after a certain paragraph, place the cursor within the desired paragraph and select the [Format > Page Break > Page Break Properties...] menu command. In the Page Breaks dialog box, you can specify various settings for the page break.

Page break before

  • Always
    Forces a page break before the current paragraph.
  • Left
    Forces a page break before the current paragraph and causes the next page to print as a left-side (even-numbered) page. For this option to work correctly, you must enable Different even/odd pages in the Page Setup dialog box.
  • Right
    Forces a page break before the current paragraph and causes the next page to print as a right-side (odd-numbered) page. For this option to work correctly, you must enable Different even/odd pages in the Page Setup dialog box.
  • Avoid
    Specifies that automatic page breaks immediately before the current paragraph should be avoided.
  • Auto
    Removes any forced page break and resets the automatic page break behavior before the current paragraph to the default (allowed).

Page break inside

  • Avoid
    Specifies that automatic page breaks inside the current paragraph should be avoided.
  • Auto
    Resets the automatic page break behavior inside the current paragraph to the default (allowed).

Page break after

  • Always
    Forces a page break after the current paragraph.
  • Left
    Forces a page break after the current paragraph and causes the next page to print as a left-side (even-numbered) page. For this option to work correctly, you must enable Different even/odd pages in the Page Setup dialog box.
  • Right
    Forces a page break after the current paragraph and causes the next page to print as a right-side (odd-numbered) page. For this option to work correctly, you must enable Different even/odd pages in the Page Setup dialog box.
  • Avoid
    Specifies that automatic page breaks immediately after the current paragraph should be avoided.
  • Auto
    Removes any forced page break and resets the automatic page break behavior after the current paragraph to the default (allowed).

CSS2 supports page breaks, which allow users to divide pages when printing. In the Edit window, the page break will appear as a red line, however it is not visible in the Web browser.

top


Page Setup dialog box

[File > Page Setup...], Page Setup

Paper

Orientation

Margins (inches)

Header/Footer

Print settings for the current editing session can be specified.

Paper

  • Size
    Selects a paper size from the drop-down list.
  • Source
    Selects the source of the paper for the printer from the drop-down list..

Orientation

  • Portrait
    Prints the page with vertical orientation.
  • Landscape
    Prints the page with horizontal orientation.

Margins (inches)

  • Left/Right/Top/Bottom
    Enters the page margins, the distance of the header from the top of the page, and the distance of the footer from the bottom of the page, in inch. The default value is 1 inch.
  • Header/Footer
    Sets the margins for the Header and Footer. The default value is 0.5 inch.

Header/Footer

The header and footer each consist of two parts. One part is aligned with the left margin; the other part is aligned with the right margin.
  • Different even/odd pages
    If you select this check box you can differentiate Header and Footer settings for even and odd pages.
  • Even pages
    If Different even/odd pages is selected, click this radio button to edit the header and footer for even-numbered pages.
  • Odd pages
    If Different even/odd pages is selected, click this radio button to edit the header and footer for odd-numbered pages.
  • Header
    The left text box specifies the contents of the left-side header. The right text box specifies the contents of the right-side header. Use the drop-down menus (marked '...') to choose from the available header items, such as document title, page number, etc.

    • When you select an item from the drop-down menu, the item is inserted into the header contents without replacing the existing header contents. If you want to replace the existing contents, select them before using the drop-down menu.

  • Footer
    The left text box specifies the contents of the left-side footer. The right text box specifies the contents of the right-side footer. Use the drop-down menus [image] to choose from the available footer items, such as document title, page number, etc.

    • When you select an item from the drop-down menu, the item is inserted into the footer contents without replacing the existing footer contents. If you want to replace the existing contents, select them before using the drop-down menu.

    Item

    Code

    Description

    Document title

    &title

    The document's title as it appears in the title bar of the browser. If not specified, it will read 'No title'.

    File name

    &filename

    The document's file name or URL if the file is on the Internet.

    Page number

    &page

    The current page number.

    Number of pages

    &total

    The total number of pages of the document. For example, third page of a 5 page document will be shown as '3/5' by entering '&page/&total'.

    Date

    &date

    The current date in short format (e.g., 6/21/01).

    Date (Including day of week)

    &longdate

    The current date in long format (e.g., Monday, June 21, 2001).

    Time

    &time

    The current time in 12-hour format (e.g., 5:00 PM).

    Time (24-hour clock)

    &miltime

    The current time in 24-hour format (e.g., 17:00).

    Available Header/Footer items
  • Start page numbering at
    Specifies the beginning page number. Has no effect if page numbers are not included in the header or footer. The default value is 1.
  • Print background color and image
    Select this option to print the document's background color or background image. By default, the background color or image is not printed to enhance the readability of the document when printed on a black-and-white printer, such as most laser printers.

    • This setting also affects the printing of background colors/images of layers, tables, and table cells. However, background colors of text will be printed regardless of this setting.

  • Print all text black
    Select this option to print all text as black, regardless of text color. This usually enhances readability when printing on non-color printers, but if the Print background color and image option is enabled, this option should be deselected.

    • This setting does not affect the printing of text background colors.

  • Allow page breaks inside tables
    Select this option to allow page breaks to occur inside tables. If you deselect this option, a page break will be forced to occur before a table that would otherwise be divided by a page break. However, tables that are too large to be printed on one page will be divided regardless of this setting.
  • Use Defaults button
    Restores all settings to their defaults.
  • Printer... button
    Lets you select a printer other than the default printer.
The settings in the Page Setup dialog box apply to all open documents, not just the current document. Also, the settings apply only in the current editing session; they are not saved with documents.

top


Paste Format dialog box

[Edit > Paste Format...], <F2>, Paste Format

When you use the Paste Format command to paste attributes that you copied using the Copy Format dialog box ([Edit > Copy Format...]), Namo WebEditor is usually able to determine what the target of the command is, and applies the attributes without prompting. However, when you paste a background color into a cell of a table, it's not clear whether the background color should be applied to just the one cell or the entire table. In such cases, the Paste Format dialog box appears to let you specify the range of the paste operation. You can choose to apply the background color to the current cell or selected cells only, the entire table, or the entire current document.

Apply the color in the clipboard

  • As cell background color
    Applies the attribute only to the selected cell.
  • As table background color
    Applies the attribute to the selected table.
  • As document background color
    Applies the attribute to the entire document.


Print Preview

[File > Print Preview],

  • Print...
    Opens the Print dialog box, enabling you to print the document.
  • Next Page
    Shows the next page of the document. (A "page", in this context, means a portion of the document that fits on one printed sheet of paper--not a home page.) This button is enabled only when the document has two or more pages.
  • Prev Page
    Shows the previous page of the document. (A "page", in this context, means a portion of the document that fits on one printed sheet of paper--not a home page.) This button is enabled only when the document has two or more pages.
  • Two Pages
    Shows two pages side by side. This button is disabled if the entire document will fit on one printed page.
  • Zoom In
    Increases the magnification of the preview. There are three zoom levels.
  • Zoom out
    Decreases the magnification of the preview. There are three zoom levels.
  • Close
    Closes the Print Preview window.

It's always a good idea to check the Page Setup dialog box before you print, to make sure that the print margins and other options are set correctly.


Resource Manager -Component tab

[File > New...]

Choosing a document template

When you need to create a new Web page, it's often convenient to use a template rather than starting with a blank page. A template is a ready-made HTML document that contains a table layout or other pre-made components that you can fill with your own content. Templates save a lot of time by giving you a head start when composing various kinds of common Web pages. Select the [File > New...] menu command to open the Component tab of the Resource Manager, where you can select a template for the new document.

You can also create a new, blank document by typing <Ctrl+N> or clicking the New button [image] on the Standard Toolbar.


Save As dialog box

[File > Save As...], <Ctrl + D>, Save As

  • Save in
    Shows the current drive or directory. You can select a local drive or a computer on the local network using the drop-down menu.
  • Folder/file list
    The list box shows the folders and files in the current directory. Double-click a folder to open it. Click once on a file to copy the file's name. Double-click a file to save the current document using the file's name, replacing the file.
  • File name
    Initially shows the current filename, or 'noname[X].htm' (where [X] is an integer) if you are saving a new document. You can type a new filename here, with or without an extension. If you do not type an extension, an appropriate extension for the selected file type (see next item) will be automatically added.
  • Save as type
    Select a file type from this drop-down menu. The file type is initially set to HTML Files (*.htm, *.html), indicating that the document will be saved using an extension of '.htm' or '.html'. If you select a different file type, an extension appropriate for that type will be automatically appended to the filename. The file type selection also determines what kinds of files are shown in the folder/file list; select All Files to show all types of files.

    • The selection of a file type in the Save as type menu usually has no effect on the actual content or formatting of the document being saved. For instance, saving an HTML document using type XML Files does not reformat the document as an XML file. The only exception to this rule is the Text Files type. If you save an HTML document as text, Namo WebEditor will automatically remove all HTML tags, links, and other Internet-specific information from the document, leaving it with only plain text content. The Save File As dialog box will appear, letting you specify how line breaks should be handled and what character set should be used when saving the text document.

  • URL
    If you are currently connected to the Internet, you can save the document directly to a Web site by entering the site's URL here and clicking Save to URL.

    • In order to save directly to a Web site, the site must be listed in the Remote Sites dialog box, and you must have correctly entered the site's host name, your login ID, your password, and other information in the Remote Site Settings dialog box.

  • Title
    Shows the document's current title as it appears in the title bar of a Web browser. You can enter a new title here.

top


Save File As dialog box

[File > Save As... - choose "Text Files (.txt)" in the Save As Type Menu - click Save button],

File name

Save as type

Encoding

You can select a format and character set when saving an HTML document as a text file.

File name

Displays the path and filename of the document to be saved. (This information is not editable.)

Save as type

  • Text (line)
    Each line of text in the document will become its own paragraph in the text file. Line breaks will be treated as paragraph breaks. All HTML tags, links, and other Internet-specific information will be stripped.
  • Text (paragraph)
    Paragraphs are left intact. (Line breaks will be ignored.) All HTML tags, links, and other Internet-specific information will be stripped.
  • HTML
    No changes will be made to the content or formatting of the document. All HTML tags, links, and other Internet-specific information will be left intact. Choosing this option is essentially the same as saving the document normally, except that the filename will have a '.txt' extension instead of '.htm' or '.html'.

Character set

You can choose a character set for the text document from the drop-down menu. In case of English version of Windows, the default is Western European (Windows). If the document contains non-Western characters, choose the appropriate character set.

top


Spelling Check dialog box

[Tools > Check Spelling...], <F7>, Spelling Check

Check spelling

Buttons

Suggests corrections for misspelled words and offers other spelling-related functions.

Check spelling

Spell checking is initiated using the [Tools > Check Spelling...] menu command or the <F7> shortcut key. If the spell checker finds an apparently misspelled word, the word is highlighted in the Edit window, and the Spelling Check dialog box appears.
  • Incorrect word
    The word that is apparently misspelled. (The word could not be found in the active spelling dictionaries.)
  • Change to
    The text that will replace the misspelled word if Change or Change All is clicked. This text box is initially filled with the first word in the list of suggested corrections (see below), but you can enter anything you like.
  • Suggestions
    The closest matches to the misspelled word that could be found in the active spelling dictionaries. Click any word in the list to place it in the Change to text box.
  • User dictionary
    If you have multiple user dictionaries, you can select the active one using this menu.

Buttons

  • Ignore
    Continues the spell check, leaving the apparently misspelled word alone.
  • Ignore All
    Continues the spell check, ignoring this and all other occurrences of the apparently misspelled word. However, the apparently incorrect word is not added to the user dictionary; the word will again be flagged as incorrect the next time you run spell checking.
  • Change
    Replaces the misspelled word with the text in the Change to text box and continues the spell check.
  • Change All
    Replaces all occurrences of the misspelled word in the document with the text in the Change to text box, and continues the spell check.
  • Add
    Adds the apparently misspelled word to the user dictionary. Words added to the user dictionary will be considered correct whenever you run spell checking in the future. Note that different forms of the same word, such as different verb tenses, must be added to the user dictionary individually, since the user dictionary contains no base form of the word from which variations can be recognized.
  • Suggest
    If you type a word in the Change to text box and click Suggest, if Namo WebEditor does not recognize the word you typed, it will show a list of closest matches to the typed word in Suggestions.
  • Document Top
    Restarts the spell check from the top of the document.
  • User Dictionary
    Opens the User Dictionary dialog box, where you can add or remove words from the user dictionary.
  • Close
    Closes the Spelling Check dialog box, terminating the spell check.

You can undo a correction even while the Spelling Check dialog box is still open by clicking the Undo button on the Standard Toolbar. Multiple corrections can be undone (one a time) once the spell check is finished by using Undo repeatedly.

top


Symbol dialog box

[Insert > Symbol...], <Ctrl+F7>, Symbol

Symbol tab

Unicode tab

Special characters which cannot be typed using the keyboard can be inserted.

Symbol tab

Displays all the characters in the standard (single-byte) Windows character set. Select a symbol to enable a larger view that appears in the lower left side of the dialog box.

Unicode tab

Displays all the characters in the two-byte Unicode character set. Depending on what language version of Windows is installed, you may not be able to see all the characters properly. Characters that cannot be displayed are represented with a question mark. When inserting unicode characters into the document, set the Character set as 'unicode' in the [File > Document Properties... - General tab] menu.

Insert button

Click to insert the selected character at the insertion point.

Copy to Clipboard button

Click to copy the selected character to the clipboard.

The Symbol dialog box remains open until you click Close.


System Meta Variable (HTTP-EQUIV) dialog box

[File > Document Properties - <META> Element tab - System variables Add.../Modify... button], Document Properties

The name and value of a system variable can be entered or edited.
  • Name
    Enters the name of System meta Variable to add to the document.
  • Value
    Enters the value (content) of System meta Variable.

Systems variables are used when creating an HTTP response header, which is used by a web browser and/or web server.


User Meta Variable (HTTP-EQUIV) dialog box

[File > Document Properties - <META> Element tab - User Variables Add.../Modify... button], Document Properties

The name and value of a user meta variable can be entered or edited.
  • Name
    Enters the name of user meta variable to add to the document.
  • Value
    Enters the value (content) of user meta variable.

User variables are made for CGIs or other specific programs.


User Dictionary dialog box

[Tools > User Dictionary...], [Tools > Check spelling... - User Dictionary... button], User Dictionary

  • Add word
    Enter a word to add to the user dictionary.
  • Word list
    Lists the words that are currently in the user dictionary.
  • Dictionary
    If there are multiple user dictionaries, one can be selected from the drop-down menu.
  • Total number of words
    Shows the total number of words in the user dictionary.
  • Add
    Click to add the word entered in Add word to the user dictionary.
  • Remove
    Click to remove the selected word from the user dictionary.

Words that are included in the dictionary are considered correctly spelled in the Spelling Check.


Widow and Orphan Control dialog box

[Format > Page Break > Widow and Orphan Control...]

What are widows and orphans?

When a document is printed, page breaks sometimes occur just after the first line or just before the last line of a paragraph. A single line before a page break is called a "orphan"; a single line after a page break is called an "widow". To avoid widows and orphans, Namo WebEditor lets you specify the minimum number of lines you want to keep together before or after the page break.

  • Orphans
    Less than the number of lines you specify will be kept on the next page. For example, if you want to leave the document as it is if the number of lines is greater than 4, but want to apply orphan control if there are fewer that 4 lines, enter '4' in the text box.
  • Widows
    Less than the number of lines you specify will be kept on the previous page. For example, if you want to leave the document as it is if the number of lines is greater than 4, but want to apply widow control if there are fewer that 4 lines, enter '4' in the text box.


Window List

Window List dialog box

[Window > Window List...], <Ctrl + W>

  • Number of open documents
    Shows the number of documents open in the Edit window.
  • Window list
    This list box lists all the open documents by name. Double-clicking an item in the list brings that document to the front, allowing it to be edited.
  • Activate
    Activates the selected document, allowing it to be edited.
  • Save Document
    Saves the selected document.
  • Close Document
    Closes the selected document.
  • Move Up
    Moves the selected document one step up in the list, moving its document tab to the left. (Only available when there are more than two documents.)
  • Move Down
    Moves the selected document one step down in the list, moving its document tab to the right. (Only available when there are more than two documents.)


What is the Resource Manager?

The Resource Manager

The Resource Manager is a managing tool for resources provided with Namo WebEditor, including document components, Clip Arts, color sets, Smart Buttons, Flash Buttons, themes, and table styles. You can import, delete, and rename resources, and even make a thumbnail image of a resource with the Resource Manager.

Objects that are controlled by the Resource Manager

  • Component
    The Component tab consists of Document, Component, Frameset, E-mail, and i-mode folders. You can add a new document or insert a new component in the Web document.
  • Clip Art
    You can preview the Clip Art files classified by file formats (All / GIF / JPG (JPEG)).
  • Color Set
    You can manage frequently used colors in a folder. You can perform co-work easily by sending the Color Set information to the coworkers.
  • Smart Button
    The Smart Button tab contains various banners and Smart Buttons.
  • Flash Button
    The Flash Button tab contains various Flash Buttons.
  • Theme
    A theme is a pre-made Web site design. You can select themes from more than 200 choices.
  • Table Style
    You can apply various pre-designed table styles.
  • All
    Brings all resources together in a single tab.

Menu

The Menu button located in the lower left corner of the Resource Manager consists of detail options for resource management.

  • New Group
    creates a new group.
  • New Folder
    Creates a new folder under the selected folder or group.
  • Delete
    Deletes the selected folder or file.
  • Rename...
    Renames the selected folder.
  • Import File...
    Imports and saves the file selected in the Open dialog box of the specified folder.
  • New Color...
    Adds a new color selected in the Color Picker Pop-up to the specified folder.
  • Refresh
    Refreshes the preview pane.
  • Make Thumbnail
    Creates thumbnails which help display the resources in the preview pane quickly. This option is available only in the Clip Art, Smart Button, Flash Button and Color Set tab.
  • Convert To 5.0 Theme
    Converts the theme from Namo WebEditor 4 to Namo WebEditor 5 format. This function is used in the Theme tab.
  • Zip...
    Creates an archive of resource files of the selected group or folder in the Zip file format, so that you can send them to others.
  • Unzip...
    Unzips the Zip file of a folder and installs the unzipped resource files into the Resource Manager.
  • Unzip Group...
    Unzips the Zip file of a group and installs the unzipped resource files into the Resource Manager.

top


Using the Resource Manager

Selecting a resource

  1. Select the [Window > Resource Manager...] menu command.
  2. Select a resource tab of the Resource Manager. For example, if you wish to select a frameset, select the Component tab.
  3. Select a folder in the category list located on the left side of the Resource Manager.
  4. Resources included in the folder are shown in the preview pane.
  5. Select a resource in the preview pane. A dotted blue border will appear around the resource.

Applying a resource

  1. Select a resource in the Resource Manager.
  2. Do one of the followings:
    • Click the button in the bottom right of the Resource Manager. For example, select 'Frameset1' in the frameset folder of the Component tab, and click New Document. Followings are the command buttons that you will see in the Resource Manager.
      • Command Button | Description | Tabs with the Buttons
New Document | Opens a new document in the selected format. | Component tab
Insert | Inserts the selected resource in the document. | Component, Clip Art, Smart Button and Flash Button tabs
Insert As Bg | Inserts the selected resource as the background of the document. | Clip Art tab
Add To Custom Color | Adds the selected color to the Custom Color. | Color Set tab
Apply | Applies the selected resource to the document. | Theme and Table Style tabs
    • Double-click a resource. When you double-click a resource, priority goes to New document command first, then to Insert command.
    • Click and drag the resource to the document in the Edit window. Release the mouse button when the mouse pointer changes into [image].

top


Creating a new group or folder

You can create your own resource group besides the ones that Namo WebEditor provides. Make a custom resource group which helps you access quickly to the resources you use frequently.

Creating a new group

  1. Select the [Window > Resource Manager...] menu command.
  2. Select a tab where you wish to make a new group.
  3. A list of categories is shown in the left.
  4. Select New Group in the Menu of the Resource Manager.

  5. A new group 'newgroup1' will be made. The sequence number will increase as you make multiple resource groups.

Making a new folder

  1. Select the [Window > Resource Manager...] menu command.
  2. Select a tab where you wish to make a new folder.
  3. A list of categories is shown in the left. Select a folder under which you wish to make a new folder.
  4. Select New Folder in the Menu of the Resource Manager. You can also use the shortcut menu of the category list.

top


Renaming groups or folders

You can rename the group or folder in the category list. However, System group can not be renamed.

  1. Select the [Window > Resource Manager...] menu command.
  2. Select a tab that contains the group or folder you wish to rename in the Resource Manager.
  3. Select a folder or group you wish to rename in the category list located in the left side of the Resource Manager.
  4. Select Rename... in the Menu located in the lower left corner of the Resource Manager. You can also use the shortcut menu of the category list.
  5. Specify a new name in the Rename Group of Folder dialog box. In the Enter a new group or folder name text box, enter a new folder name which is the actual folder name which will be also created in the local hard drive. In the Enter a new group or folder title text box, enter a new folder title which will be displayed in the category list in the Resource Manager.

  6. Click OK.


Moving/copying groups or folders

You can move or copy resources or folders to other folders in the Resource Manager. However, you cannot move the entire group to other group or a folder. Sublevel folders and files are moved/copied along when you move/copy a folder. For example, if you copy Bars folder in the Clip Art tab, Basic, Images, Patterned folders and all the clip art inside those folders are copied along.

Moving or copying a folder

  1. Select the [Window> Resource Manager] menu command.
  2. In the Resource Manager, select a tab which contains the group, folder, or resource that you wish to copy. For example, if you wish to copy the Clip Art folder, select the Clip Art tab.
  3. In the category list located on the left, select a group or folder you wish to copy. For example, select Banners folders in the Clip Art tab.
  4. Do one of the followings:
    • If you wish to copy, click and drag the group or folder to the folder you wish to copy to. Release the mouse button when the mouse pointer changes to [image].
    • If you wish to move, drag the group or folder to the folder to want to move to while holding down the <Shift> key. Release the mouse button when the mouse pointer changes to [image].

Moving or copying resources

  1. Select the [Window> Resource Manager...] menu command.
  2. In the Resource Manager, select a tab which contains the group, folder, or resource that you wish to copy.
  3. Select the folder in the category list located on the left side of the Resource Manager.
  4. In the preview pane, select the resource that you want to move/copy. A dotted blue border will show around the resource.
  5. Do one of the followings:
    • If you wish to copy, drag the resource to the folder you want to copy to. Release the mouse button when the mouse pointer changes to [image].
    • If you wish to move, drag the resource key to the folder to want to move to while holding down the <Shift> key. Release the mouse button when the mouse pointer changes to [image].

In case you are working in the Flash Button or Smart Button tab, you can use the {Modify...} and {Modify As New...} shortcut menu. The Modify... command lets you modify the currently selected button. Click to open the Flash Button Properties/ Smart Button dialog box and modify the selected button. Modify As New... lets you make a copy of the currently selected button. Click to open the Flash Button Properties/ Smart Button dialog box and modify the copy of the currently selected button. If you specify the button properties and click OK in the Flash Button Properties/ Smart Button dialog box, the modified copy of the button will be added to the current folder.

top


Deleting a group/folder/resource

You can delete a resource group, folder, or resource. If you delete a resource group or a folder, the folders and resources in the sub-level will be deleted as well. However, System Group can not be deleted.

  1. Select the [Window > Resource Manager...] menu command.
  2. In the Resource Manager, select a tab which contains the group, folder, or resource that you wish to delete. For example, if you wish to deletes a clip art resource, select the Clip Art tab.
  3. Do one of the followings:
    • Select a group/folder/resource you wish to delete and press the <Del> key. You can also use the shortcut menu.
    • Select a group/folder/resource you wish to delete and select Delete in the Menu.
    • If you want to select multiple resources, hold down the <Ctrl> key or <Shift> key down while selecting.
  4. You will be asked 'Do you want to delete the selected folder (or item(s))?'. Click Yes to continue and No to cancel.

To delete a group, you must select the All tab in the Resource Manager.


Modifying the Color Set

You can create a custom color and add it to the Color Set.

Adding a new color

  1. Select a folder in the category list located in the left of the Resource Manager.
  2. Select New Color using the Menu button or the shortcut menu.

  3. In the Color Picker dialog box, specify a new color and click OK.
  4. New color is added in the preview pane.

Inserting a remark

  1. Select a color in the preview pane.
  2. Click the Remark cell. Click once more and the Remark cell becomes editable.
  3. Enter a brief remark of the color.

Modifying a color

  1. Select a color you wish to modify in the preview pane.
  2. Select Modify in the shortcut menu.
  3. Select a new color in the Color Picker dialog box and click OK.
  4. New color will replace the previous one.

Deleting a color

  1. Select a color in the preview pane.
  2. Select Delete in the shortcut menu.
  3. You will be asked for confirmation with a message 'Do you want to delete the selected item(s)?'.
  4. Click Yes.

top


Zipping a resource group

When you work in a team, you may need to send and receive the resources. You can zip the resource group and send it to your coworkers.

Zipping resource group

  1. Select the [Window > Resource Manager...] menu command.
  2. Select a resource group that you wish to zip and send to others. For example, if you wish to send the Smart Button banners, select the Banners folder in the Smart Button tab.
  3. Select Zip... in the Menu of the Resource Manager. You can also select from the shortcut menu of the resource group.

  4. In the Save As dialog box, specify the folder and the file name, and click OK.


Unzipping a resource group

When you work in a team, you may need to send and receive the resources. Unzip the resource group that you have received in a Zip file format.

Unzipping a resource group

  1. Select the [Window > Resource Manager...] menu command.
  2. Select Unzip... in the Menu of the Resource Manager, or in the shortcut menu after selecting a resource group in the category list.
  3. Select the zipped file that you received in the Open dialog box.
  4. Click Open, and the resource group will be installed automatically.


Resource Manager -Component tab

[File > New], [Window > Resource Manager - Component tab]

Category list

Preview

Description

Filename

Buttons

Category list

Shows a list of categories which includes Component, Document, Email, Frameset and i-mode folders. Select a group, and you can see various formats categorized in a group in the preview pane on the right. You can add or delete your own customized resource groups or folders.

  • Shortcut menu
    Shortcut menu of the category list has the same menus as the menu you see when you click Menu located in the lower left corner of the Resource Manager, except for New Group.

Some of the menu options are not available unless you open the Resource Manager using the [Window > Resource Manager...] menu command.

Preview

You can see the format of the selected folder in the Preview window. Select a format in the Preview window.

Preview shortcut menu

Right-click anywhere inside the Preview window.

  • Delete
    Deletes the selected format.
  • Select All
    Selects all the formats in the Preview window.
  • Refresh
    Refreshes the Preview window.

Description

Displays a short description of the selected format.

Filename

Displays the filename of the selected format.

Buttons

Use buttons to insert the selected format to the document.

  • New Document
    Opens a new document as the selected format is applied to the document.
  • Insert
    Inserts the selected format into the document.
  • Close
    Closes the Resource Manager.

top


Resource Manager - Clip Art tab

[Insert > Image Element > Clip Art...], [Window > Resource Manager - Clip Art tab]

Category list

Preview

File size/File name

Buttons

Category list

Shows the list of categories of Clip Art. Select a Clip Art group, and you can see the clip arts categorized in a group in the preview pane on the right. You can add or delete your own customized resource groups or folders.

  • Shortcut menu
    Shortcut menu of the category list has the same menus as the menu you see when you click Menu located in the lower left corner of the Resource Manager, except for New Group and Unzip Group....

Some of the menu options are not available unless you open the Resource Manager using the [Window > Resource Manager...] menu command.

Preview

You can preview the clip arts in the selected folder. Select the clip art image you want in the preview pane.

Preview shortcut menu

Right-click anywhere inside the preview pane.

  • Import File...
    Select a folder and select an image file you wish to import in the Open dialog box and include the image to the folder you have selected.
  • Delete
    Deletes the selected image file.
  • Select All
    Selects all the clip art image files in the preview pane.
  • Refresh
    Refreshes the preview pane.
  • Make Thumbnail
    Creates thumbnails which enables to show clip arts in the preview pane quickly.

File size/File name

Displays size and name of the image file you have selected in the preview pane.

Buttons

Use buttons to insert the selected clip art to the document.

  • Insert As Bg
    Inserts the selected clip art as a background image.
  • Insert
    Inserts the selected clip art into the document.
  • Close
    Closes the Resource Manager.

top


Resource Manager - Color Set tab

[Window > Resource Manager - Color Set tab]

Category list

Preview

Buttons

Category list

Shows a list categories of Color sets. You can add or delete your own customized resource groups or folders.

  • Shortcut menu
    Shortcut menu of the category list has the same menus as the menu you see when you click Menu located in the lower left corner of the Resource Manager, except for New Group and Unzip Group....

Some of the menu options are not available unless you open the Resource Manager using the [Window > Resource Manager...] menu command.

Preview

Shows color information of the selected folder. Select a color in the preview window.

  • Color
    Displays the colors.
  • HTML code
    Shows hexa code of the colors.
  • Color Name
    Shows the name of the colors.
  • Web Safe
    Writes 'O' if the color is one of the Web Safe 216 colors.
  • Remark
    Shows a remark on the colors. For example, you can enter 'use this color for the background' when you are co-working on a project and want to use a specific color as a background color.

Preview shortcut menu

Right-click anywhere inside the preview pane.

  • Import File...
    Select a folder and select a Namo color set file (*.ncs) to import in the Open dialog box and save it in the folder you have selected.
  • New Color...
    You can specify a new color in the Color Picker dialog box, and add the new color to the current color set.
  • Modify...
    You can modify the color in the Color Picker dialog box.
  • Modify As New...
    You can modify the selected color and save it as a new custom color.
  • Delete
    Deletes the selected color.
  • Select All
    Selects all the color shown in the preview window.
  • Refresh
    Refreshes the preview pane.

Buttons

Use buttons to add the selected color to the Custom Color.

  • Add To Custom Color
    Adds the selected color to the Custom Color in the Color Picker dialog box. You can select multiple colors: hold the <Ctrl> key down to select colors one by one or select a color and hold down the <Shift> key and select another color to select all the colors in between.
  • Close
    Closes the Resource Manager.

top


Resource Manager - Smart Button tab

[Insert > Smart Button], [Window > Resource Manager - Smart Button tab]

Category list

Preview

File size/File name

Buttons

Category list

Shows the list of categories of Smart Buttons. Select a Smart Button group, and you can see the Smart Buttons categorized in a group in the preview pane on the right. You can add or delete your own customized resource groups or folders.

  • Shortcut menu
    Shortcut menu of the category list has the same menus as the menu you see when you click Menu located in the lower left corner of the Resource Manager, except for New Group and Upzip Group....

Some of the menu options are not available unless you open the Resource Manager using the [Window > Resource Manager...] menu command.

Preview

Shows Smart Buttons in the selected folder in the preview pane. Select a Smart Button in the preview pane.

Preview shortcut menu

Select a button and right-click anywhere inside the preview pane.

  • Import File...
    Select a folder and select a Smart Button file (*.tng) to import in the Open dialog box and save it in the folder you have selected.
  • Modify...
    Modifies the currently selected button. Click to open the Smart Button dialog box and modify the selected button.
  • Modify As New...
    Makes a copy of the currently selected button. Click to open the Smart Button dialog box and modify the copy of the currently selected button. If you specify the button properties and click OK in the Smart Button dialog box, the modified copy of the button is added to the current folder.
  • Delete
    Deletes the selected Smart Button.
  • Select All
    Selects all the Smart Buttons in the preview pane.
  • Refresh
    Refreshes the Preview window.
  • Make Thumbnail
    Creates thumbnails which enables to show Smart Buttons in the preview pane quickly.

File size/File name

Displays the size and name of the Smart Button you have selected in the preview pane.

Buttons

Use buttons to insert Smart Button in the document.

  • Insert
    Inserts the selected Smart Button in the document.
  • Close
    Closes the Resource Manager.

top


Resource Manager - Flash Button tab

[Insert > Flash Button], [Window > Resource Manager - Flash Button tab]

Category list

Preview

File size/File name

Buttons

Category list

Shows the list of categories of Flash Button. Select a Flash Button group, and you can see the Flash Buttons categorized in a group in the Preview window on the right. You can add or delete your own customized resource groups or folders.

  • Shortcut menu
    Shortcut menu of the category list has the same menus as the menu you see when you click Menu located in the lower left corner of the Resource Manager, except for New Group and Unzip Group....

Some of the menu options are not available unless you open the Resource Manager using the [Window > Resource Manager...] menu command.

Preview

You can preview the Flash Buttons in the selected folder. Select a Flash Button in the preview pane.

Preview shortcut menu

Select a button and right-click anywhere inside the preview window.

  • Import File...
    Select a folder and select a Flash Button file (*.swf) to import in the Open dialog box and save it in the folder you have selected.
  • Modify...
    Modifies the currently selected button. Click to open the Flash Button Properties dialog box and modify the selected button.
  • Modify As New...
    Makes a copy of the currently selected button. Click to open the Flash Button Properties dialog box and modify the copy of the currently selected button. If you specify the Flash Button properties and click OK, the modified copy of the button is added to the current folder.
  • Delete
    Deletes the selected Flash Button.
  • Select All
    Selects all the Flash Buttons in the preview pane.
  • Refresh
    Refreshes the Preview window.
  • Make Thumbnail
    Creates thumbnails which enables you to show Flash Buttons in the preview pane quickly.

File size/File name

Displays size and name of the Flash Button file you have selected in the preview window.

Buttons

Use buttons to insert the selected Flash Button to the document.

  • Insert
    Inserts the selected Flash Button in the document.
  • Close
    Closes the Resource Manager.

top


Resource Manager - Theme tab

[Format > Theme...], [Window > Resource Manager - Theme tab]

Category list

Preview

Buttons

Category list

There are more than 210 themes are categorized in 12 folders. Select a theme group, and you can see the themes categorized in a group in the Preview window on the right. Double-click one in the preview pane and you can preview the theme in its actual size. Select a theme from the category list on the left to directly see the actual size preview.

  • Shortcut menu
    Shortcut menu of the category list has the same menus as the menu you see when you click Menu located in the lower left corner of the Resource Manager, except for New Group and Unzip Group.

Some of the menu options are not available unless you open the Resource Manager using the [Window > Resource Manager...] menu command.

Preview

Shows preview of the theme selected in the category list. Enlarge the Resource Manager to see the entire theme at once.

Preview shortcut menu

Right-click anywhere inside the preview pane.

  • Undo
    Cancels the changes you have made to the theme.
  • Redo
    Applies again the changes which were canceled by the Undo command. Enabled only when you have selected the Undo command before.
  • Import Theme Object...
    You can import a theme object in the Open dialog box.
  • Modify Theme Object...
    You can modify the theme objects in the Smart Button dialog box. Select {Undo} in the shortcut menu to cancel the modification you've made.
  • Theme Properties...
    In the Theme Properties dialog box, you can change properties of the theme such as text, link, and table. Select {Undo} in the shortcut menu to cancel the modification you have made.

Buttons

Use buttons to apply the theme or the theme elements to the document.

  • Apply
    Applies the selected theme to the document.
  • Close
    Closes the Resource Manager.

Once you have applied a theme to the document, you can't turn it back with <Ctrl + Z> command. You can apply another theme to replace, but to go back to the state prior to the theme application, you have to change the HTML sources in the HTML window to cancel theme application.

top


Resource Manager - Table Style tab

[Table > Table Style...], [Window > Resource Manager - Table Style tab]

Category list

Preview

File name

Buttons

Category list

Shows categories of Table Styles. Select a group, and you can see the table styles categorized in a group in the preview pane on the right. You can add or delete your own customized resource groups or folders.

  • Shortcut menu
    Shortcut menu of the category list has the same menus as the menu you see when you click Menu located in the lower left corner of the Resource Manager, except for New Group and Unzip Group....

Some of the menu options are not available unless you open the Resource Manager using the [Window > Resource Manager...] menu command.

Preview

Shows table styles of the selected folder in the preview pane. Select the table style you want in the preview pane.

Preview shortcut menu

Right-click anywhere inside the preview pane.

  • Delete
    Deletes the selected table style.
  • Refresh
    Refreshes the preview pane.

File name

Displays the filename of the table style you have selected in the preview pane.

Buttons

Use buttons to apply the table style to tables.

  • Apply
    Applies the selected table style to the table inserted in the document.
  • Close
    Closes the Resource Manager.

top


Rename Group or Folder dialog box

[Window > Resource Manager - Menu - Rename...]

You can rename a group or folder of the Resource Manager.

  • Enter a new group or folder name
    Enter a new group or folder name which will be also used as the actual folder name in the local hard drive.
  • Enter a new group or folder title
    Enter a new group or folder title which will be listed in the category list of the Resource Manager.


Size Wizard and Template

The Site Wizard

Rather than building a Web site from scratch, you can use the Site Wizard to create an entire site from a template. You can build the entire Web site manually, of course, but beginners may find it much easier to use the Site Wizard to design a Web site. You can create the basic form of a Web site by simply following the steps provided in the Site Wizard. First, choose a template, modify its structure, and apply a theme to the Web site. Then you will have the foundation of your new Web site, which leaves only the task of adding content to each document within it.

You can modify the structure that was made when you chose the template. In addition, the Site Wizard lets you select a theme, which is a ready-made set of design elements such as buttons, banners, background images, and other page elements that gives every page of your new site a consistent look.

When you build a Web site using the Site Wizard, a navigation bar is automatically created. The navigation bar is updated automatically as you change the structure of the Web site.

Building a Web site using the Site Wizard

Template tab Select a site templtate | Structure tab Customize the site structure | Theme tab Select a theme | Information tab Enter a site information | Publish tab Specify the publishing information

Template

A template is an outline for a Web site. The template itself is already a Web site, with its own structure and documents. You can customize the template by modifying its structure, and adding or deleting documents. Then you can apply a theme, and add content. Select one from among the various templates Namo WebEditor provides, and modify as you desire.

top


Selecting a site template

Selecting a template is the first step in building a Web site using the Site Wizard. Select a template that best suits your Web site goals.

  1. Select the [File > Site > Site Wizard...] menu command to open the Site Wizard.
  2. Select a template in Template of the Template tab.
  3. Choose a template from this list. As you click each template, the pages available in that template are listed in the Structure list box in the middle of the window, and a preview of the template's index page appears in the Preview pane on the right side of the window.
  4. Click Next.

Example

  1. Select the [File > Site > Site Wizard...] menu command to open the Site Wizard.
  2. Select 'Personal Site 1' in Template of the Template tab.
  3. In the Structure list box, you can see the structure of the selected template.
  4. Click Next.


Adding a new document

You can modify the Web site structure in the Structure tab of the Site Wizard, and Web documents can be added to your site.

  1. Open the Site Wizard and choose a template for the Web site.
  2. Select a Web document in the Structure list box of the Structure tab. The new Web document will be added in the sub-level of the Web document you have selected.
  3. Click New....
  4. Select the Document folder in the Component tab of the Resource Manager.
  5. Select a template in the preview pane on the right and click OK.
  6. When the new document is added in the Structure, enter a name for the new document and press <Enter>.

Example

  1. Open Site Wizard and choose 'Personal Site 1' in the Template tab.
  2. Select 'Favorites' in Structure of the Structure tab.
  3. Click New.... The Resource Manager is opened.
  4. Select the Document folder in the Component tab of the Resource Manager.
  5. Select 'Blank 01' and click OK.
  6. Enter 'Subject 4' as the name of the document, when it is added in Structure and press <Enter>.


Renaming Web documents

You can rename any Web document of the Web site.

  1. Open the Site Wizard and choose a template for the Web site.
  2. Select the Web document whose name you wish to change in Structure of the Structure tab.
  3. Click Rename.

  4. Enter a new name, and press <Enter>.

Example

  1. Open the Site Wizard and choose 'Personal Site 1' in the Template tab. Click Next.
  2. Select 'Favorites' in Structure of the Structure tab.
  3. Click Rename.
  4. Enter 'Hobbies' for the new name, and press <Enter>.


Moving a Web document

You can modify the structure of the Web site by moving Web documents in the Site.

  1. Open the Site Wizard and choose a template for the Web site. Click Next.
  2. Select a Web document in Structure of the Structure tab.
  3. Drag and drop the selected document to where you wish to exist. If the document you have selected includes other documents in its sub-level, those documents will also be moved.
  4. Click Move Up or Move Down to move the selected document in the same level.
  5. Click Promote or Demote to move the selected document to a different level.

Example

  1. Open the Site Wizard and choose 'Personal Site 1' in the Template tab. Click Next.
  2. Click to select 'Photo Gallery' in Structure of the Structure tab.
  3. Move the document below 'Favorites' by dragging.
  4. 'Photo Gallery' will be moved to the position below 'Favorites'.
  5. Select 'Photo 1' and click Promote.


Deleting Web documents

You can remove a document from the site if it's no longer useful.

  1. Open the Site Wizard and choose a template for the Web site. Click Next.
  2. Select a Web document in Structure of the Structure tab.
  3. Click Remove.

Example

  1. Open the Site Wizard and choose 'Personal Site 1' in the Template tab. Click Next.
  2. Select 'Photo Gallery' in Structure of the Structure tab.
  3. Click Remove.
  4. The Photo Gallery' document will be deleted.


Copying Web documents

You can copy a Web document and paste it anywhere in the site.

  1. Open the Site Wizard and choose a template for the Web site. Click Next.
  2. Select the Web document you wish to copy in Structure of the Structure tab.
  3. Drag and drop the selected document to where you wish it to be copied, while holding down the <Ctrl> key.

Example

  1. Open the Site Wizard and choose 'Personal Site 1' in the Template tab. Click Next.
  2. Select 'Photos' in Structure of the Structure tab.

  3. Drag the document 'Photos' to 'Links' while holding the <Ctrl> key.
  4. The document 'Photo' will be pasted in the sub-level of 'Links'.


Selecting a theme

Select a theme to be applied to the entire Web site.

  1. Open the Site Wizard.
  2. Choose a template for the Web site in the Template tab, and modify the structure in the Structure tab. Click Next.
  3. Select a theme group in Themes of the Theme tab. Click Next.
  4. Select the theme you want. Click Enlarge to select the theme in the Resource Manager where you can have a larger view of the themes. Once a suitable theme is found, click OK in the Resource Manager.
  5. Click Next.

Example

  1. Open the Site Wizard and choose 'Personal Site 1' in the Template tab. Click Next.
  2. Delete the 'Photo Gallery' document in the Structure tab. Click Next.
  3. Select 'Arts' theme group in Themes of the Theme tab.
  4. Select 'Modern' in the 'Arts' theme group.
  5. You can preview the selected document with the 'Modern' theme applied in the Preview pane.

  6. Click Next.


Entering Web Site Information

Enter basic information for your new site, such as your name, your email address, and copyright information. This information will be used in various places in the new Web site.

  1. Open the Site Wizard and choose a template for the Web site.
  2. Specify the structure and theme of the Web site in the Structure tab and Theme tab, respectively.
  3. In the Information tab, enter Title, Author, E-mail, and Copyright information.
  4. Choose a folder on your hard drive in which to store your new site in Enter a location for the new site. Instead of typing a directory path into the text box, you can click Browse... and select an existing folder in the Browse for Folder dialog box.
  5. Click OK.

Example

  1. Open the Site Wizard and choose 'Personal Site 1' in the Template tab.
  2. Delete 'Photo Gallery' in the Structure tab, and select 'Modern' in the Theme tab.
  3. Enter 'My site' in the Title text box of the Information tab.
  4. Enter 'namo' in the Author text box.
  5. Enter 'webeditor@namo.com' in the E-mail text box.
  6. Enter copyright information in the Copyright information text box.
  7. In Enter a location for the new site, enter the full path of the new folder 'My_Site1' when made in the sub-level of 'my document'.

  8. Click OK.

top


Setting the publish information

Set information for Web site publishing.

  1. Open the Site Wizard and choose a template for the Web site.
  2. Specify the structure, theme, and information of the Web site.
  3. In the Publish tab, select a Web server in the Remote Sites list and click Modify....If you wish to add a new server, click New....
  4. In the Remote Site dialog box, enter your ISP information and user information.
    • When modifying an existing Web server: Enter User name and Password, and modify the 'User ID' of the URL in the HTTP Information.
    • When adding a new Web server: Enter Site Name and Host name, as well as User name and Password. Inquire with your ISP for the Web server information.
  5. Click OK.
  6. Click Finish.

Passive Mode: If the Web server has a firewall, it is sometimes required to select Passive Mode to access the Web server. This options is selected by default.

You can specify, or change the publishing information later in the Site Manager. Leave the publish information unspecified if you don't have a Web server to publish to.

Example

  1. Open the Site Wizard and choose 'Personal Site 1' in the Template tab.
  2. Delete the 'Links' page in the Structure tab and select 'Modern' theme in the Theme tab.
  3. Specify Web site information in the Information tab.
  4. Select 'namo' in the Remote Sites list in the Publish tab, and click New....
  5. In the Remote Site Settings dialog box, enter 'namodoc' for User name.
  6. Enter Password.
  7. Select Passive Mode.
  8. Change User ID into 'namodoc', in the FTP Information.
  9. Click OK.
  10. Click Finish.

top


Site Wizard dialog box

[File > Site > Site Wizard...]

The Site Wizard is used to create an entire Web site in a few simple steps.

Rather than building a Web site from scratch, you can use the Site Wizard to create an entire site from a template. You can then add your own contents (text and images) to the site. The Site Wizard comes with a variety of templates for company sites, personal sites, and other types of sites. In addition, the Site Wizard lets you select a theme, which is a ready-made set of design elements such as buttons, banners, background images, and other page elements that gives every page of the new site a consistent look.

The Site Wizard has 5 steps: the Template tab, Structure tab, Theme tab, Information tab, Publish tab. Click on the icons to directly move from one step to another.

  • Template tab
    The first step in using the Site Wizard is selecting a template for your new site. You can also choose which pages in the selected template to include or exclude for your site.
  • Structure tab
    Customize the structure of the template you have selected in the Template tab however you wish.
  • Theme tab
    Select a theme that will be applied to the entire Web site.
  • Information tab
    Enter basic information for your new site: your name, your email address, and your copyright information. This information will be used in various places in the new Web site. Specify a folder to save the files in.
  • Publish tab
    Select an ISP to use for publishing your Web site, and enter the user information.
After the Site Wizard finishes creating your new site, you'll see your new site's index page in the Edit window. The Site Manager, where you manage your site, will be open in another window (use the Windows task bar to switch to it). Now you're ready to begin adding your own content.

top


Site Wizard - Template tab

[File > Site > Site Wizard... >Site Wizard - Template tab]

You can select a template to use for a new site created using the Site Wizard.

Selecting a site template

The first step in using the Site Wizard is selecting a template for your new site. There are various templates to choose from, ranging from a personal home page to an online shopping mall. You can also choose which pages in the selected template to include or exclude for your site.
  • Templates
    Shows a list of templates that you can apply to the site. Choose a template from this list after carefully examining the structure and reading the description attached.
  • Structure
    Shows the structure of the selected template. You can modify the menu and structure of the selected template in the next step, by clicking the Structure tab.
  • Preview
    Shows a preview of the Web document selected in Structure.


Site Wizard - Structure Tab

[File > Site > Site Wizard... >Site Wizard - Structure tab]

You can customize the structure of the new site.

  • Structure
    Shows the structure of the site.
  • Preview
    Shows a preview of the Web document selected in the Structure list box.
  • New...
    Click to add a new Web document into the sub-level of the selected Web document. Select the document type for the new Web document in the Document folder of the Component tab in the Resource Manager.
  • Copy
    Makes a copy of the selected file in the same level.
  • Remove
    Deletes the Web document selected in the Structure list box.
  • Rename
    Allows you to rename the Web document selected in the Structure list box. Enter a new name and press <Enter>.
  • Move Up
    Moves the selected document upward in the same level.
  • Move Down
    Moves the selected document downward in the same level.
  • Promote
    Moves the selected document one level up.
  • Demote
    Moves the selected document one level down.


Site Wizard - Theme Tab

[File > Site > Site Wizard... >Site Wizard - Theme tab]

The third step in using the Site Wizard is choosing a theme for your new site.

Selecting a theme

A theme is a set of design elements that together determine the overall look of a Web site created using the Site Wizard. These design elements include background images, banner shapes, button shapes, bullet shapes, fonts, text styles, and other elements of Web page design. Themes help give a consistent, pleasing look to all the pages of a Web site. Themes are interchangeable; if you decide you don't like the theme you chose when you created a site, you can apply a different theme at any time. Namo WebEditor 5 ships with more than 200 professionally-designed themes to suit almost any type of Web site.

  • Themes
    Shows a list of themes that you can apply to the site.
  • Structure
    Shows the structure of the site.
  • Preview
    This area shows a preview of the selected theme applied to the selected page.
  • Enlarge
    Click to have a larger view of themes. You can select a theme in the Theme tab of the Resource Manager which appears when the Enlarge button is clicked.


Site Wizard - Information Tab

[File > Site > Site Wizard... > Site Wizard - Information tab]

Some basic information for a new site can be entered in the Information tab of the Site Wizard.

Entering site info

The forth step in using the Site Wizard is entering some basic information for your new project: your name, your email address, and your copyright information. This information will be used in various places in the new Web site.
  • Title
    Enter a title for the Web site, which will appear at the top of your new site's index page. (You can change this later by double-clicking the banner on the index page.) This name will also be used as the site name.
  • Author
    Enter a name for the author of the Web site, whether it is a person or an organization.
  • E-mail
    Enter the e-mail address you wish to appear at the bottom of each page of the new site. Generally, this is the e-mail address of the webmaster. Leave this blank if you don't want the Site Wizard to automatically insert an e-mail address at the bottom of each page.
  • Copyright
    Enter the copyright information you wish to appear at the bottom of each page of the new site. For example, "Copyright (C) 2001 Namo Interactive Inc. All rights reserved." Leave this blank if you don't want the Site Wizard to automatically insert copyright info at the bottom of each page.
  • Enter a location for the new site
    Choose a folder on your hard drive in which to store your new site. If no folder exists at the location you entered, you will be asked whether you wish to create the folder. Click Yes.
  • Browse...
    Click Browse... and select an existing folder in the Browse for Folder dialog box. If no folder exists at the location you entered, you will be asked whether you wish to create the folder. Click Yes.

You can accept the default location offered by the Site Wizard (C:\My Documents\Namo_SiteX\).

top


Site Wizard - Publish Tab

[File > Site > Site Wizard... >Site Wizard - Publish tab]

Enter or Modify the information for Web site publishing.

  • Remote Sites
    Shows a list of Web servers to which you can publish your Web site.
  • Remote Site Information
    Shows information about the selected Web server.
  • New...
    Click to add a new Web server to the Remote Sites list.
  • Modify...
    Click to add or modify information of the selected Web server.
  • Delete
    Click to delete the Web server from the Remote Sites list.


What is a Theme?

A theme is a pre-made design that you can apply to all or some of the documents in a Web site.

Each of the components in a theme is designed to match the other components, giving the documents to which the theme is applied a pleasing, consistent look. More than 200 themes are sorted in 12 categories such as Abstract, Arts, Business _Classic, Business_Modern, Custom, Exotic, Home and Kids, Interests, Science, Seasons, Theme, and Zero. Browse the sublevel of the categories to select a specific theme.

By applying a theme, you can decorate the Web site very easily. You can also edit themes by modifying the theme components.


What are Theme Components?

A theme is basically a collection of items, such as buttons, colors, and paragraph styles, that give a consistent look to the documents to which the theme is applied. These items, which collectively constitute themes, are called theme components, and they can be classified by which objects they affect.

Text

Theme components in this category affect the look of texts in the document.

  • Normal paragraph style
    This is the style applied to normal paragraphs. To apply this style, simply select Normal in the HTML Style menu in the Formatting Toolbar. (This style applies to paragraphs that use the standard HTML paragraph tag, <P>.)
  • Heading 1 & Heading 2 styles
    These styles are applied to Heading 1 and Heading 2 paragraphs. To apply either of these styles, select Heading 1 or Heading 2 in the HTML Style menu in the Formatting Toolbar. (These styles apply to paragraphs that use the standard HTML heading tags, <H1> and <H2>.)
  • List styles: Parent list & Child list
    These styles are applied to paragraphs that are items in a list. Unlike the normal paragraph and heading styles, the list styles are not associated with any HTML style. There are two list styles: namo-list is for top-level list items, and namo-sublist is for second-level list items. To apply either of these styles, select one from the CSS Style menu in the Formatting Toolbar.
Applying one of these list styles does not automatically put a bullet in front of the paragraph. Rather, these list styles are meant to be used in conjunction with bullet theme components, described below in Others.

Link

Theme components in this category affect the properties of hyperlinks in the document.

  • Normal text color
    The default color of text in the document.
  • Hyperlink color
    The color of normal (unvisited and inactive) links.
  • Visited link color
    The color of links that have been used at least once by the site visitor.
  • Active link color
    The color of links that are currently active. (When a site visitor tabs to a link, it comes "active", meaning that the link will be followed if the site visitor presses the <Enter> key.)

Dynamic components

These are components that change automatically when you make a change to the structure of the site. They are automatically inserted by the Site Wizard when you create a project, but you can insert additional dynamic components later anywhere in a document. There are two kinds of dynamic components, described below.
  • Banners
    The banner is an image with text that is inserted at the top of each document created by the Site Wizard. The text on the banner changes automatically when you change the Navigation title of the document. To insert a new banner, use the [Insert > Site Element > Banner...] menu command.
  • Navigation bars
    A navigation bar is a set of buttons or text links that can be used to navigate to other documents in the site. The Site Wizard inserts at least one navigation bar in each document that it creates. The labels on the buttons in a navigation bar (or the words in the text links of a navigation bar) change automatically when you change the structure of the site, change the Navigation title of the target documents, or set the navigation bar to link to a different set of documents. Navigation bars can be either horizontal or vertical. Each theme includes a different button style for each of the three possible states of a navigation bar button: normal, highlighted, and inactive. Each of these comes in different flavors for horizontal and vertical navigation bars, for a total of six different button styles.
    To insert a new navigation bar, use the [Insert > Site Element > Navigation Bar...] menu command.

Theme objects

Theme components in this category can be inserted additionally anywhere in Web documents. Theme objects include bullets, labels, buttons, and horizontal bar. To insert any of these components in the current document, use the [Insert > Site Element > Theme Objects...] menu command, then select the component you wish to insert in the Insert Theme Object dialog box.

  • Bullets
    Small images that can be used as bullets.
  • Labels
    Small images that contain labels such as 'New', 'Cool', and 'Hot'.
  • Horizontal bar
    An image of a horizontally long bar that can be used as a separator.
  • Navigation buttons
    Small images that can be used as navigation buttons, such as 'Home', 'Back', 'Next' buttons

Others

You can also specify the background color of the document and table properties.

  • Background
    You can specify the background color of the document.
  • Table
    You can specify the colors of borders, and background color of the header cell.

top


Inserting banners

A banner is a text or an image that shows the title of the document. You can insert banners after applying a theme. Or, like with the navigation bar, you can insert a banner to documents even if no theme is applied as long as the document is included in site.

  1. Place the cursor where you wish to insert a banner.
  2. Select the [Insert > Site Element > Banner...] menu command.
  3. A banner will be inserted.

The text label on a banner is always the navigation title of the document. If you wish to add a banner that has some other label of your own choosing, use a Smart Button instead.


Inserting theme objects

There are several other types of theme components in addition to navigation bars and banners. These include two kinds of bullets; three small icons with the words "Cool", "Hot", and "New"; and a graphical horizontal line. You can not insert theme objects if no theme is applied to the document.
  1. Select the [Insert > Site Element > Theme Objects...] menu command.
  2. Select a theme object in the Insert Theme Object dialog box.
  3. In the Save in text box, specify the folder to save the theme object in. Click Browse... to browse the folder in which you wish to save the theme object.
  4. Click OK. The selected theme object will be inserted.

If you insert a theme object and save the document, the Copy Resource File dialog box will appear. Specify the folder and click OK. A message 'The following files already exist. Do you want to overwrite them?' will appear. Click OK to overwrite. If you don't save the theme object in the Copy Resource File dialog box, it will remain to have the absolute path, which may cause the theme object not displayed properly when you publish the site.

Example

  1. Select the [Insert > Site Element > Theme Objects...] menu command.
  2. Click to select a 'horizontal line' in the Insert Theme Object dialog box.
  3. In Save in, the path and filename will appear as 'images/nth_Fall_hr.gif'. (The filename may be different depending on the theme you have selected.)
  4. Click OK.
  5. A horizontal line will be inserted.


Inserting a navigation tree

After applying a theme, insert a navigation tree. You can insert a navigation tree even if a theme is not applied as long as the document is included in the site.

  1. Select the [Insert >Site Element > Navigation Tree...] menu command.
  2. In the Navigation Tree Properties dialog box, specify the level to start the tree. The navigation tree will display the selected level and its sublevels.
  3. Specify the Text properties.
  4. Specify the Collapsed and Expanded bullets in the Bullet.
  5. Specify the target frame from the Target drop-down menu under Frame.
  6. Click OK.

Example

  1. Select the [Insert >Site Element > Navigation Tree...] menu command.
  2. Select the first level right below 'home' in the Site list box of the Navigation Tree Properties dialog box.
  3. In Text, Set Font as 'Arial', Size as '9pts', Normal as 'Black', and Highlight as 'Pink'.
  4. Leave the Bullet as default.
  5. Select '_blank' from the Target drop-down menu under Frame.
  6. Click OK.


Inserting a navigation bar

After applying a theme, you can insert a navigation bar made in either texts or buttons. You can insert a navigation bar even if no theme is applied as long as the document is included in the site.

  1. Select the [Insert >Site Element > Navigation Bar...] menu command.
  2. In the Navigation Bar Properties dialog box, select the Navigation bar type.
  3. Select the Orientation of the navigation bar.
  4. Select the Type. Click [image] and select a Smart Button in the Smart Button tab of the Resource Manager to use as the navigation bar button.
  5. Click OK.

Strictly speaking, a Smart Button is not a theme component, even though you use the [Insert >Site Element > Navigation Bar...] menu command to add one in the Navigation Bar Properties dialog box. Unlike true theme components, which can only be added to documents that use a theme, Smart Buttons can be added to any document.

Example

  1. Select the [Insert >Site Element > Navigation Bar...] menu command.
  2. In the Navigation Bar Properties dialog box, select Siblings for the Navigation bar type.
  3. Select 'Vertical' in Orientation.
  4. Select the Use Smart Buttons radio box under Type.
  5. Click [image] and select a Smart Button in the Smart Button tab of the Resource Manager.
  6. Click OK.


Editing theme objects

You can edit theme objects in the preview pane of the Resource Manager.

  1. Select the [Format > Theme...] menu command.
  2. Select a theme in the Theme tab of the Resource Manager.
  3. A rectangular boundary will appear as you place the mouse pointer over a theme object.
  4. Double-click the theme object you wish to modify.
  5. Edit the theme object in the Smart Button dialog box and click OK.
  6. The modified theme object will appear in the preview pane of the Resource Manager.

Example

  1. Select the [Format > Theme...] menu command.
  2. In the Theme tab of the Resource Manager, select 'Modern' theme in the Art group.
  3. Double-click the banner image.
  4. Edit the banner in the Smart Button dialog box and click OK.
  5. The modified banner will appear in the preview pane of the Resource Manager.


Applying paragraph styles

Basic HTML styles and CSS styles are applied to the texts of themes. 'Heading 1' and 'Heading 2' are for HTML styles, and 'namo-list' and 'namo-sublist' are for CSS Styles. These styles can be applied only to documents that have themes.

Applying paragraph styles

  1. Place the cursor in the paragraph where you wish to apply paragraph styles.
  2. Select the HTML Style drop-down menu on the Formatting Toolbar.
  3. Select 'Heading 1' or 'Heading 2' from the drop-down menu.

Applying text styles

  1. Place the cursor to the paragraph where you wish to apply text style.
  2. Select the CSS Style drop-down menu on the Formatting Toolbar.
  3. Select 'namo-list' or 'namo-sublist' from the menu.

Example

  1. Place the cursor to the paragraph where you wish to apply a paragraph style.
  2. Select the HTML Style drop-down menu on the Formatting Toolbar.
  3. Select 'Heading 1' from the drop-down menu. The 'Heading 1' style will be applied to the paragraph containing the cursor.


Editing theme properties

You can modify properties of themes in the preview pane of the Resource Manager.

  1. Select the [Format > Theme...] menu command.
  2. Select a theme in the Theme tab of the Resource Manager.
  3. After selecting a theme, right-click anywhere inside the preview pane of the Resource Manager, and select {Theme Properties...} in the shortcut menu.
  4. Specify the Text, Link, Heading and List, Table properties in the Theme Properties dialog box. Under Heading and List, the drop-down menu next to the color box is used to specify the font size in pixels.
  5. Click Apply.
  6. The modification will be applied to the theme in the preview pane of the Resource Manager.

Example

  1. Select the [Format > Theme...] menu command.
  2. In the Theme tab of the Resource Manager, select 'Modern' theme in the Art group.
  3. Right-click anywhere inside the preview pane of the Resource Manager, and select {Theme Properties...} in the shortcut menu.
  4. The Theme Properties dialog box will appear.
  5. Under Text, specify Text to 'Black' and Font to 'Arial'.
  6. Under Link, specify Hyperlink to 'Red', Active link to 'Purple', and Visited link to 'Gray'.
  7. Under Heading and List, specify Heading 1 to '15', Heading 2 as '12', Parent list as '12', and Child list as '10'.
  8. Under Table, specify Dark to 'Black', Light to 'Yellow', and TH Background to 'Green'.
  9. Click Apply and click OK.
  10. The modification will be applied to the theme in the preview pane of the Resource Manager.

top


Applying a theme

You can apply a theme either to the entire site or to the current document.
  1. Select the [Format > Theme...] menu command.
  2. Select a theme group in the Theme tab of the Resource Manager.
  3. Select a theme. You can view a larger preview of a theme on the right. You can enlarge the dialog box by clicking and dragging one of its edges or corners.
  4. Click OK.
  5. In the Apply Theme to dialog box, select on of the following:
    • All files in the site
      Applies the selected theme to the entire site. This radio button is enabled only when the site is open.
    • Current file and its children
      Applies the selected theme to the current file and its sublevel documents. This radio button is enabled only when the current document is included in the navigation tree of the site.
    • All open files
      Applies the selected theme to all the files that are currently open.
    • Current file
      Applies the selected theme only to the current document.
  6. Click OK.
  7. The theme will be applied. If there was an existing theme, it will be replaced with the newly selected theme.

When you apply a theme to a document, you can not turn it back with the <Ctrl + Z> command. While you can change the theme by replacing an existing one with a new one, removing a theme will require you to edit HTML sources in the HTML window manually.

Example

  1. Open a document included in the site.
  2. Select the [Format > Theme...] menu command.
  3. In the Theme tab of the Resource Manager, select 'Modern' theme in the Art group.
  4. Click OK.
  5. In the Apply Theme to dialog box, select 'All files in the site'.
  6. Click OK.
  7. 'Modern' theme will be applied to the entire site.

top


Resource Manager - Theme tab

[Format > Theme...]

  • Category list
    The hierarchical list on the left side of the dialog box shows the available theme categories. More than 210 pre-designed themes are categorized in 12 groups. Click a category to show small previews of the themes in that category in the selection box on the right. Clicking the plus sign next to any category name reveals the names of the themes in the category list.
  • Preview
    Displays the theme you have selected in the category list. To view a larger preview of a theme, double-click the small preview or click the theme's name in the category list. If the entire preview isn't visible, you can enlarge the dialog box by clicking and dragging one of its edges or corners.
  • Apply
    Click to apply the selected theme. Click Close, if you do not wish to apply the theme.

When you apply a theme to a document, you can not turn it back with the <Ctrl + Z>command. While you can change the theme by replacing an existing one with a new one, removing a theme will require you to edit HTML sources in the HTML window manually.


Apply Theme dialog box

[Format > Theme... > Resource Manager - Theme tab - Select a theme - Click Apply]

  • All files in the site
    Applies the selected theme to the entire site. This radio button is enabled only when the site is open.
  • Current file and its children
    Applies the selected theme to the current file and its sublevel documents. This radio button is enabled only when the current document is included in the navigation tree of the site.
  • All open files
    Applies the selected theme to all the files that are currently open.
  • Current file
    Applies the selected theme to the current document only.

When you apply a theme to a document, you can not turn it back with the <Ctrl + Z>command. While you can change the theme by replacing an existing one with a new one, removing a theme will require you to edit HTML sources in HTML window manually.


Theme Properties dialog box

[Resource Manager - Theme tab > Preview pane shortcut menu > Theme Properties...]

Text

Link

Heading and List

Table

Text

  • Text
    Specify the text color of the theme.
  • Background
    Specify the background color of the theme. Specify the background image by clicking Browse background image... . If you wish to remove the background image, click Delete background image [image].
  • Font
    Specify the font type.

Link

  • Hyperlink
    Specify the text color of hyperlinks, and whether they should be underlined.
  • Visited link
    Specify the text color of visited links, and whether they should be underlined.
  • Active link
    Specify the text color of active links, and whether they should be underlined.

Heading and List

  • Heading 1
    Specify the color and size of Heading 1 paragraphs.
  • Heading 2
    Specify the color and size of Heading 2 paragraphs.
  • Parent list
    Specify the color and size of the parent list.
  • Child list
    Specify the color and size of the child list.

Table

  • Dark
    Specify the color of the dark border.
  • Light
    Specify the color of the light border.
  • TH Background
    Specify the background color of the header cells.

top


Insert Theme Object dialog box

[Insert > Site Element > Theme Objects...]

You can insert a bullet image, highlight image, or horizontal bar image from the current theme into the current document.
  • Theme component selection box
    The selection box at the top of the dialog box shows the available theme objects from the currently-applied theme. The objects include two kinds of bullet images; three highlight images with the words "Cool", "Hot", and "New"; and a long image that can be used as a horizontal bar. Click one of the objects to select it.
  • Save in
    When you select an object, its default save path is shown in this text box. You can change the path (including the file name) by editing it directly or by clicking Browse... and selecting a folder in the Save As dialog box.
  • OK
    Click OK to insert the selected theme object into the document.

When you save the document after inserting the theme object, the Copy Resource Filess dialog box will appear, prompting you to save the inserted image. Click OK, then click OK again when prompted whether to overwrite the existing image file. Even if the image file already exists in the selected folder (as it will if you did not change the default save path), you must allow Namo WebEditor to copy the image file so that the path to the image will be changed from an absolute path to a relative path. If you do not allow Namo WebEditor to copy the image, you may experience problems when you publish the document to your Web site.


Banner Properties dialog box

[Edit window > Double-click a banner]

Label

Specify the label that will show on the banner. Changing the banner label will also change the navigation title of the current document.

Type

Decide the type of the banner.

  • Use text
    Select this option to make the banner text only.
  • Use Smart Button
    Select this option to make the banner use a Smart Button image. By default, the image is determined by the theme applied to the document. Click [image] to select a Smart Button for the banner in the Smart Button tab of the Resource Manager.
  • Use Flash Button
    Select this option to make the banner use a Flash Button image. By default, the image is determined by the theme applied to the document. Click [image] to select a Flash Button for the banner in the Flash Button tab of the Resource Manager.
  • Apply to all similar banners in the site.
    Check this option to apply the defined banner style to all the documents in the site. To apply the defined banner style only to the current document, disable this option.


What is a Site?

A Site is a managing unit for Web site building, which consists of Web documents, image files, and other objects that collectively constitute a Web site. A Site enables you to manage all these objects as members of a single group.

You probably do not need much site management when building a small site with only few Web documents. However, in larger sites, you have to logically manage the structure, links, navigation bar, theme and many more elements.

Namo WebEditor helps you manage the site easily with the Site Manager. Followings are some of the basic operations that the Site Manager can be conveniently used for.

  • Site structure designing
    You can check and modify the structure of the site easily by dragging.
  • Link verification
    Performs link verification to find broken links.
  • Easy Publishing
    You can publish a selective group of files, as well as publishing the entire site.
  • Intelligent file management
    When you change the location of files, the Site Manager automatically updates the hyperlinks, leaving you free from additional manual chores.
  • Quick information update
    You can apply themes to the entire Web site at once. Thus, you can change the appearance of the site with a few clicks at any time.
  • Navigation bar
    Creates a navigation bar for the site automatically.


Site Manager Overview

The Site Manager enables you to manage various aspects of the site in a single window. When you create a site with the Site Wizard, the Site Manager opens automatically. The Site Manager covers everything from site creation to publishing, including designing, as well as file management, link verification and many other development tasks.

The Site Manager consists of three tabs: the Site tab, Report tab, and Publish tab.

  • Site tab
    The Site tab has two windows: the Local window and the Navigation window. In the Local window, you manage files by adding, deleting, modifying them. In the Navigation window, you manage the logical structure of the site. It displays the site structure in a tree format that also contains basic information for the navigation bar.
  • Report tab
    The Report tab shows detailed information of the components. It sorts the files by their types and checks whether there are any broken links or improper resources, such as orphan files.
  • Publish tab
    The Publish tab helps in publishing files to the remote site. You can easily upload files without an extra FTP program.

Deselect the [View > Tab] menu command to make the tabs invisible. In this case, use the <Ctrl + Tab> key or <Ctrl + Shift + Tab> key to move from one tab to another.


Creating a new site

You can create a site that you can build and manage your Web site easily. Enter a name for the site and specify the site folder.
  1. Select the [File > Site > New Site...] menu command.
  2. In the Create New Site dialog box, enter site title, name, and site location.
  3. Click OK.
  4. If the specified folder does not exist, you will be asked whether to create a new folder. Click OK.
  5. A new site will be created, and the Site Manager will open.

Open the site you have recently worked with using the [File > Recent Sites] menu command. Namo WebEditor memorizes 10 recently opened sites. Top listed is the most recently opened site.

Example

  1. Select [File > Site > New Site...] menu command.
  2. The Create New Site dialog box appears.
  3. Enter 'my home' for the site title and 'namo' for the name.
  4. Specify a folder named 'home' under 'my document' folder.
  5. A new site named 'my home' will be created, and the Site Manager will open.


Creating a site with existing files

You can create a site using existing files. Or you can include existing files when you make a new site.
  1. Select the [File > Site > New Site...] menu command.
  2. Specify the site title, name, location in the Create New Site dialog box. Select the top folder where the existing files are located.
  3. Click OK.
  4. A message "Following files have been added to the site" will appear. Click OK.
  5. The Site Manager opens with the existing files included in the site.

Example

  1. Select the [File > Site > New Site...] menu command.
  2. The Create New Site dialog box will appears.
  3. Enter 'my home' for the title and 'namo' for the name.
  4. Select 'home' folder under 'my document' for the site folder. (Specify the folder in which existing files are located.)
  5. Click OK.
  6. A message "Following files have been added to the site" will appear. Click OK.
  7. The Site Manager opens with the existing files included in the site.


Saving a site

You can save the site you are currently editing in the Site Manager window.

  1. Select the [Site > Save] menu command in the Site Manager, or click Save Site [image] on the toolbar in the Site Manager.
  2. Alternatively, you can use the [File > Site > Save Site] menu command in the main window.


Opening a site

You can open an existing site.

Selecting in the Open dialog box

  1. Select the [File > Site > Open Site...] menu command.
  2. Select a site (*.wej, *.spj) you want to open in the Open dialog box.
  3. Click Open.
  4. The selected site will open, and the Site Manager will appear as well.

Selecting from the recently opened sites

  1. Select the [File > Recent Sites] menu command.
  2. Select a site from the recently opened site list.
  3. The selected site will open, and the Site Manager will appear as well.

*.wej, *.spj are the file extensions of Namo WebEditor's Site files.


Closing a site

You can close the site you are currently working with when you want to finish or pause the site creation.

  1. Select the [Files > Site > Close Site] menu command, or select the [Site >Close] menu command in the Site Manager.
  2. You will be asked "Do you want to close the site '**'?". Click Yes if you want to close the site. If you do not want to close the site, click Cancel.
  3. If you haven't saved the modification you have made, you will be asked "Save changes to the site '**'?".
  4. Select one of the followings.
    • Yes - Saves the modifications and closes the site.
    • No - Closes the site without saving the modifications. The modification you have made will not be saved. You will lose the information that was not saved.
    • Cancel - Cancels the site closing. Select this if you're not sure whether you have saved the files.


Adding a new document to the site

Once you create a site, you can add new documents to the site in Site tab of the Site Manager.

  1. Open the Site Manager by opening a site and select the Site tab.
    • In the Local window: Select a file or a folder which you wish to add a document to.
    • In the Navigation window: Select a file which you wish to add a document to.
  2. Select New Document [image] on the toolbar, or select {New > Document...} in the shortcut menu.
  3. Select a document type in the Document folder in the Component tab of the Resource Manager.
  4. Click OK and a new document is added to the site.

You cannot add a document under a file in the Local window.

Example

  1. Open the Site Manager by opening a site and select the Site tab.
  2. Select 'home' in the Navigation window.
  3. Select {New > Document...} in the shortcut menu.
  4. The Resource Manager opens.
  5. Select 'Navigation 01' in the Document folder in the Component tab.
  6. Click OK.
  7. 'Navigation 01' is inserted under 'home' in the Navigation window on the right.


Adding a new folder to the site

You can add a new folder to the site in the Local file list in the Site tab. You can insert a folder under a site or under a specific folder in a site.

  1. Open Site Manager by opening a site and select the Site tab.
  2. In the Local window in the left side, select the site name or a specific folder in which the new folder is to be inserted.
  3. Select New Folder [image] on the toolbar of the Site Manager, or select {New > Folder} in the shortcut menu.
  4. A new folder is inserted.

Example

  1. Open Site Manager by opening a site and select the Site tab.
  2. Select 'home' in the Navigation window. (The site name can be different. Select the site you have opened.)
  3. Select New Folder [image] on the toolbar of the Site Manager.
  4. A new folder is inserted.


Deleting files in the site

You can remove files from the Site Manager and from the windows folder as well.

  1. Open the Site Manager by opening a site and select the Site tab.
  2. Select file(s) you wish to delete in the Local window or the Navigation window.
  3. Select the [File > Delete] menu command, or click Delete [image] in the toolbar. You can also use the <Delete> key.
  4. A message "This operation will remove the selected files completely from the site manager and from the folders as well. If you want to restore them after this operation, restore from the Windows Recycle bin. Do you want to continue?" will appear.
  5. Click Yes to continue, and No to cancel.

Example

  1. Open the Site Manager by opening a site and select the Site tab.
  2. Select 'new_1.htm' in the Local window on the left side or in the Navigation window on the right side.
  3. Click Delete [image] in the toolbar.
  4. A message "This operation will remove the selected files completely from the site manager and from the folders as well. If you want to restore them after this operation, restore from the Windows Recycle bin. Do you want to continue?" will appear.
  5. Click Yes. The selected file 'new_1.htm' is deleted.


Changing the name of the site

You can change the name of the exiting site at any time.

  1. Open the Site Manager by opening a site.
  2. Select the [Site > Properties...] menu command in the Site Manager.
  3. Enter a name in the Title text box in the Properties dialog box. You can also change the Author of the site.
  4. Click OK.

You can change the name by right-clicking the site name and selecting {Properties...} in the shortcut menu in the Local window of the Site tab or Publish tab.

Example

  1. Open the Site Manager by opening a site.
  2. Select the [Site > Properties...] menu command in the Site Manager.
  3. Enter 'my home' in the Title text box in the Properties dialog box.
  4. Click OK. The site name is changed to 'my home'.


Cleaning up the theme files

If you apply various themes to documents, to which a set of themes have already been applied, there may be some theme files used previously that are no longer necessary. Those could be bullets and horizontal lines from the previous theme you have applied. Rather than searching removing such files manually, you can delete them using the Clean Up Theme Files feature.

  1. Open the Site Manager by opening a site.
  2. Select the [View > Clean Up Theme Files] menu command in the Site Manager.
  3. A message box will appear for confirmation. Click OK, and the unnecessary theme files are removed. You can check the result by selecting the document file and viewing it with View with Internet Explorer/Netscape.


Refreshing the site

Modifications you've made in the Site Manager may not be applied to other parts of the Site Manager instantly. You can update the Site Manager with the latest information so that all the windows have the same, latest information about the site.

  1. Open the Site Manager by opening a site.
  2. Select the Site tab or Publish tab.
  3. Select the [View > Refresh] menu command, or press <F5> key.
  4. The information of the local and remote site will be updated and both sides will have the same and latest information on the site.


Showing/hiding Site Manager controls

You can choose whether to show or hide the toolbar, window labels, tabs, or status bar in the Site Manager. Decide whether to use each control in the menu so that you can work with the site in the environment more friendly to you.

  1. Open the Site Manager by opening a site.
  2. Select one from the following in the Site Manager menu:
    • Toolbar: Select the [View > Toolbar] menu command. It will show or hide the toolbars attached to the window.
    • Label: Select the [View > Label] menu command. It will show or hide the label such as Local, Remote, or Navigation.
    • Tab: Select the [View > Tab] menu command. It will show or hide the Site, Report, Publish tabs.
    • Status bar: Select the [View > Status bar] menu command. It will show or hide the status bars which describes the function of menus or buttons.


Viewing with Internet Explorer/Netscape

Web pages may be displayed somewhat differently depending on the type of Web browser you use. You can preview the documents with Internet Explorer and Netscape before you publish documents in the Site Manager. This kind of task is essential when you want to equalize the displays in both browsers.

  1. Open the Site Manager by opening a site.
  2. Select the document to preview.
    • When using the Site tab: Select a document from either Local window or Navigation window.
    • When using the Publish tab: Select a document from the Local window.
  3. Select the [View > View with Internet Explorer] or [View > View with Netscape] menu command. Alternatively, select {View with Internet Explorer} or {View > View with Netscape} in the shortcut menu.
  4. The selected document will be displayed in the selected browser.

You can use shortcut key for preview. press <F11> for Internet Explorer and <F12> for Netscape.


Updating navigation bars

You must update navigation bars after you've made changes to the site structure by adding, changing, and deleting documents.

  1. Open the Site Manager by opening a site.
  2. Select the [View > Update Navigation Bars] menu command.
  3. A dialog box will show a message 'Updating navigation bars...' while update is under way.
  4. The navigation bar is updated.

To get the detailed information on modifying the site structure using the navigation tree, refer to Adding document to Navigation tree or Removing documents from the navigation tree.


Expanding/Collapsing the file tree nodes

When there are a lot of files displayed in the Local window, you can control which files and folders to be displayed or hidden by expanding and collapsing the file tree nodes. Using this function, you can hide the documents and folders which are not directly related to the current task.

  1. Open the Site Manager by opening a site and select the Site tab.
  2. Select collapse and expand marks ( [image] / [image] ) in the Local window of the Site tab.
  3. Click [image] to expand the node. The Local window shows all the folders and files under a specific folder. The clicked [image] turns into [image].
  4. Click [image] to collapse the node. The Local window hides all the folders and files under a specific folder. The clicked [image] turns into [image].


Maximizing the window

If there are two windows in one tab, you can choose to view one of the windows in the maximized size.

  1. Open the Site Manager by opening a site.
  2. Select Local or Navigation window in the Site tab or select Local or Remote window in the Publish tab. If a window is selected, the title bar turns into dark grey.
  3. Select the [View > Maximize] menu command, or click Maximize [image] on the right of the each window title.
  4. The selected window will be maximized and the counterpart window disappears.

Click Minimize [image] to restore the original size, or deselect Maximize menu command by selecting [View > Maximize] once again.


Moving/Copying documents

You can easily move documents in the Navigation window in the Site tab. You can also copy and paste documents to another position.

Moving documents

  1. Open the Site Manager by opening a site and select the Site tab.
  2. Click to select a document in the Navigation window and drag it to where you want to locate it. To select the multiple documents, select the documents while pressing down the <Ctrl> key.
  3. When the mouse pointer turns into a small gray rectangle, release the mouse button.
  4. The document will be moved.

Copying documents

  1. Open the Site Manager by opening a site and select the Site tab.
  2. Select a document to copy in the Navigation window. To select the multiple documents, select the documents while pressing down the <Ctrl> key.
  3. Drag the document while holding down the <Ctrl> key.
  4. When the mouse pointer turns into a small gray rectangle, release the button where you want to copy the document.
  5. The document will be copied.

You can also use the <Ctrl + C> key or select the [Edit > Copy] menu command to copy the document(s). Select a document under which you want to paste the file and press the <Ctrl + V> key or select the [Edit > Paste] menu command.

You can also drag a document file in the Local file list under or besides a document in the navigation tree. Select the documents you want to add to the navigation tree in the Local file list. Drag the selected document(s) under or besides the blue rectangle, representing a document, in the navigation tree. When the mouse pointer turns into a small gray rectangle, let go of your mouse button. The document is added to the navigation tree.

Example

  1. Open the Site Manager and select the Site tab.
  2. Select 'Photo_1' under 'Favorites' in the Navigation window. (This filename can be different. Select a relevant document in your site.)
  3. Drag the document to 'Photo Gallery' while holding down the <Ctrl> key.
  4. Release the mouse button.
  5. 'Photo_1' will be copied under 'Photo Gallery'.

top


Adding documents to the navigation tree

Not all files in the site are shown in the Navigation window. You should add a document to the navigation to display the files of the Local file list in the Navigation Tree preview located on the right.

  1. Open Site Manager by opening a site and select the Site tab.
  2. In the Navigation window, select a document which you wish to add a document to.
  3. Select the [Edit > Insert to Navigation...] menu command, or select {Insert to Navigation} in the shortcut menu.
  4. Select the document(s) you wish to insert in the Select File dialog box. You can select multiple document files by selecting the file while holding down <Ctrl> key.
  5. Click OK.
  6. Selected documents will be added to the Navigation window.

You can easily drag a document file in the Local file list under or beside a document in the Navigation Tree. Select the documents you want to add to the Navigation Tree in the Local file list. Drag the selected document(s) under or beside the blue rectangle in the Navigation Tree. When the mouse pointer turns into a small gray rectangle, release the mouse button. The document is added to the Navigation Tree.

Example

  1. Open Site Manager and select the Site tab.
  2. Select the Navigation window. In the Navigation window, select the document which you wish to add a document to.
  3. Select the [Edit > Insert to Navigation...] menu command.
  4. Select 'newfile.htm' in the Select File dialog box.
  5. Click OK.
  6. 'newfile.htm' will be inserted in the Navigation Tree.

top


Adding a section to the site

A section is a set of related, template-based Web documents that you can add to any site in Namo WebEditor. Each section has its own predefined design elements, such as backgrounds, banners, bullets, etc., which are shared by all the pages in the section. You can add these sections only in the Navigation window.

  1. Open the Site Manager by opening a site and select the Site tab.
  2. In the Navigation window, select a document where a section should be added. A section is to be inserted into the sub-level of the document.
  3. Select the [Edit > Insert Section...] menu command or select {Insert Section...} from the shortcut menu.
  4. In the Insert Section dialog box, select a section in Templates and click OK. You can see the preview of the documents selected in Structure in the Preview area on the right.
  5. The section is inserted under the document you have selected in the Navigation window.

Example

  1. Open the Site Manager and select the Site tab.
  2. Select 'favorites' in the Navigation window. (The document name can be different. Select a relevant document in your site.)
  3. Select {Insert Section...} from the shortcut menu.
  4. In the Insert Section dialog box, select 'Profile' in Templates, and click OK.
  5. 'Profile' section is inserted under the document 'favorites'.


Removing documents from the navigation tree

You can remove a document from the Navigation Tree. The document will be removed only from the Navigation Tree, not from the folder.

  1. Open the Site Manager by opening a site and select the Site tab.
  2. Select a document you wish to remove in the Navigation window on the right side.
  3. Select {Remove from Navigation Tree} in the shortcut menu, or click Remove from Navigation Tree [image] on the toolbar of the Site Manager. You can select the [Edit > Remove from Navigation Tree] menu command instead.
  4. The selected document will be removed from the Navigation Tree.

Example

  1. Open the Site Manager by opening a site and select the Site tab.
  2. Select 'Namo' under 'Links' in the Navigation window. (The filename can be different.)
  3. Click Remove from Navigation Tree [image] on the toolbar.
  4. 'Namo' will be removed from the Navigation Tree.

Selecting {Remove from Navigation Tree} in the shortcut menu is different from selecting a document in the Navigation Tree and pressing the <Del> key. While the former removes the selected document just from the Navigation Tree, not physically from the folder, the latter will physically remove the selected document from the disk.


Inserting an external URL

You can insert external URL into a Web site. External URLs are not documents included in the site, but are imported from outside to usually perform functions such as Boards and chatting board.

  1. Open the Site Manager by opening a site and select the Site tab.
  2. In the Navigation window, select the document under which you wish to add an external URL.
  3. Select the [File > New > URL...] menu command, or click New URL [image] on the toolbar.
  4. In the New URL dialog box, enter URL and Navigation title, then click OK.
  5. The URL will be inserted to the Navigation Tree in the Navigation window.

Example

  1. Open the Site Manager by opening a site and select the Site tab.
  2. Select 'Links' in the Navigation window. (The document name can be different. Select a relevant document in your site.)
  3. Click New URL [image] on the toolbar.
  4. In the New URL dialog box, enter 'http://www.namo.com' for URL and 'Namo' for Navigation title.
  5. Click OK, and 'Namo' will be inserted under 'Links'.

You can see the New URL [image] icon in the inserted external document. This icon represents that the document is an external document, not a document constituting a site in the hard drive.


Link verification

It is recommended to verify links before publishing the site. You can verify and correct the links in the Report tab. Link verification lets you check which files are not properly linked to any of the document in the site and modify the Improper Resources.

  1. Open the Site Manager and select the Report tab.
  2. Select Broken links under Hyperlinks in the Filter list window on the left. When you first use the filter, a message asking, "Hyperlinks have not been checked. Check hyperlinks now?" appears. Click OK.
  3. A list of Broken links will be displayed in the File list window on the right.
  4. Double-click a file in the File list window.
  5. The selected file will open in the Edit window, and the cursor will be placed where the broken link is.
  6. Check and modify the broken link.

Select Orphan under Improper resources in the Filter list window on the left to check for the orphan files, which are not linked to any of the files in the site. Check whether you need the orphan files, because orphan files cannot be accessed by your site visitors. If you need them, set the proper links to the documents. If not, you can safely delete them from the site.


Sorting files

In the Report tab, you can sort files in the site into HTML documents, Image files, CSS files, Flash files, URL, and Other files.

  1. Open the Site Manager and select the Report tab.
  2. In the Filter list window on the left side, select one from HTML document, Image files, CSS files, Flash files, URL, and Other files.
  3. Files of the selected type will be listed in the File list window on the right. Name, Size, Modified, State, Type of the files are shown.
  4. Click each title of the tabs to sort the files according to the selected tab.

The State column shows the status of a document. In case you have opened and are currently editing a document in the Edit window, 'Editing' appears in the State column of the document. In case you have made some modifications and have not saved them, 'Modified' appears in the column.

Example

  1. Open the Site Manager and select the Report tab.
  2. Select Image files in the Filter list window on the left side.
  3. Image files are listed in the File list window on the right. You can check Name, Size, Modified, State, Type of the image files.
  4. Click each title of the tabs to sort the files according to the selected tab.


Create New Site dialog box

[File > Site > New Site...]

Enter a title for the new site and specify the folder to save files in.

  • Enter a title for the new site
    Enter a title for the new site.
  • Enter your name
    Enter the author, either a person or an organization, of the site.
  • Specify the location of the new site
    Specify the folder to save files in. Click Browse... to select a folder in the Browse for Folder dialog box. Select the folder and click OK. The path of the folder is automatically inserted in the Specify the location of the new site text box.

Instead of entering the full path, you can create a new folder by selecting a folder and editing the last part of the path. For example, click Browse... and select (C:) in the Browse for Folder dialog box. 'C:\' is inserted in the Specify the location of the new site text box. Now add the folder name you want at the end of 'C:\' and click OK.


Open dialog box

[File > Site> Open Site...]

Look in

Displays the current folder.

File name

Displays the names of selected files.

Files of type

  • Site Files (*.wej *.spj)
    Shows only the site files created by Namo WebEditor. *.wej and *.spj are the file extension of Namo WebEditor.
  • All Files (*.*)
    Shows files of all formats in the folder.

Select the [File > Recent Sites] menu command to select from recently opened sites. Namo WebEditor shows up to 10 sites.


New URL dialog box

[Site Manager - Site tab - Navigation window - Select a file - File > New > URL, [image]]

  • URL
    Enter an external URL you wish to insert to the site.
  • Navigation title
    Enter a name for the external URL. This name is also used as the label of the button in the Navigation Bar.


Select File dialog box

[Insert > Image... > Image path - Site... button], [Insert > Hyperlink... - Site... button]

Shows Name (the filename), Folder (location of the file), Size (file size), Modified (time of the latest update), Type (file format) of the files included in the site. You can easily select different types of files using this dialog box.

  • Type
    Shows the type of files that will be displayed in the list. When called from Image Properties dialog box only Image files will be displayed in the Type drop-down list, and HTML documents will be selected by default when opened from the Create Hyperlink dialog box. You can select from All files, HTML documents, Image files, CSS files, Flash files.


Select File dialog box

[Site Manager Navigation window - Select a file > Edit > Insert to Navigation...]

  • Type
    Shows the type of the documents that are listed below in the file list window.
  • File list window
    Shows the Name, Size, Modified time, State, Type of the files. Select the files to insert to the Navigation window.
  • OK
    Click to insert the selected files to the Navigation window.


Properties dialog box - Site tab

[Site Manager - Site > Properties...]

  • Title
    Shows the title of the site. This text box is editable.
  • Author
    Shows the author of the site. This text box is editable.
  • Site file
    Shows the folder that contains site files. This text box is not editable. To modify this, you should create a new site.
  • Last Modified
    Shows time and date of the last update.

    e.g.5/24/2001 10:29 AM
  • Publish to
    Shows the remote site to which you publish the site. Use the drop-down list to specify the FTP site you want to use among the default ISPs and the FTP servers you have entered before. Click [image] to add a new FTP site in the Remote Sites dialog box.
  • Source Control
    Shows the path of the site in the Source Control database. If you are not using any Source Control, 'None' is displayed.


Properties dialog box - File tab

[Site Manager Site tab/Publish tab - Select a Web document > File > Properties...],

  • Name
    Shows the path in the site and the filename.
  • Type
    Shows the type of the file. In case this is a HTML file, 'HTML document' is displayed.
  • Size
    Shows the size of the file.
  • Last modified
    Shows the date and time of the last update.
  • Enable Publish
    Select to include the file in publishing. This option is selected by default. If you disable this option, the file is displayed in gray in the Publish tab and cannot be published.
  • Source Control
    Shows the path in the Source Control database. If you are not using the Source Control, 'None' is displayed.


Properties dialog box - HTML tab

[Site Manager Site tab/Publish tab - Select a Web document > File > Properties...]

  • Title
    Shows the title of the document.
  • Author
    Shows the author of the document.
  • Character set
    Specifies the encoding method to apply to the documents. Choose a character set from the drop-down menu. The Internet code associated with the selected character set will be displayed on the right drop-down menu. Select user-defined to leave the character set unspecified. When you select a character set, the code of the character set is displayed on the right.
  • Navigation title
    Shows the name of the navigation button. If you don't specify the navigation title, the filename will be used as the navigation title.
  • Parent page
    Shows the document that is one level up in the Navigation Tree.
  • Previous page
    Shows the document that is in the left (or above) in the same level in the Navigation Tree.
  • Next page
    Shows the document that is in the right (or below) in the same level in the Navigation Tree.
  • Enable Navigation
    Shows whether it is included in the navigation bar. This option is enabled by default. To exclude the HTML document from the site navigation, deselect this option.


Insert Section dialog box

[Site Manager > Site tab > Navigation window - Edit > Insert Section...]

A section is a set of related, template-based Web documents that you can add to any site in Namo WebEditor. Each section has its own predefined design elements, such as backgrounds, banners, bullets, etc., which are shared by all the pages in the section.

  • Templates
    Shows a list of section categories. Select a section type you want to insert.
  • Structure
    Shows the structure of the selected section.
  • Preview
    Shows the preview of the selected document.

When you add a section, Namo WebEditor does not automatically create a link to the section in the parent document unless the parent document contains a navigation bar that is set to show links to child documents. In other cases, you must add a link manually.

Each section template has its own "look" that is independent of the theme used by a site created with the Site Wizard. When you add a section, it does not inherit the theme used by the site; rather, its appearance is governed by the section template. If you apply a new theme to the whole site, or if you apply a theme to the section, some but not all of the design elements of the section will reflect the new theme. The affected elements are the background image, the default font, and the default text color. Other elements such as bullets and banners, are not changed.


Customize Columns dialog box

[Site Manager - Site /Publish tab - View > Customize Columns...]

Available Columns

Currents Columns

Column customizing buttons

Set to Default

You can select the types of column information that will be displayed in the Local window of the Site and Publish tab. Name, Size, Modified, State, Type of the files are displayed by default. You can customize the columns considering the information needed to be displayed for the current task.

Available Columns

  • Name (default)
    Name of the file.
  • Size (default)
    Size of the file.
  • Modified (default)
    Date and time of the last update.
  • State (default)
    Current editing status of the document. Shows"Editing" if the document is opened in the Edit window, and "Modified" if the document has been modified and the modifications have not been saved.
  • Type (default)
    Displays the type of the file.
  • Folder
    The folder in which the current document is located. The first '/' means the root directory of the site.
  • Source Control
    If the document has been added to a source control database, it shows the source control status of the file. If the document has not been added to a source control database, no information appears in this column.
  • Document title
    Displays the title of the file when it is a document file.
  • Navigation title
    Displays the title of navigation. If there is no title assigned for navigation, document title is displayed instead.
  • Author
    Displays the author specified in the HTML meta tags.
  • Character set
    Displays the character set information of the document meta tags.
  • Target URL
    Shows target URLs of external documents that are added as site documents.

Current Columns

Shows the list of information that are currently displayed. Click Remove to delete the selected item from the list. You can edit this list both at the Site tab and at the Publish tab. You can also set the different columns for the two tabs.

Column customizing buttons

  • Add
    Adds the selected item to the Current Columns list.
  • Remove
    Removes the selected item from the Current Columns list.
  • Move Up
    Moves the selected item one step upwards. Items located higher will be displayed leftward in the Local window of the Site tab or Publish tab in the Site Manager.
  • Move Down
    Moves the selected item one step downwards. Items located lower will be displayed rightward in the Local window of the Site tab or Publish tab in the Site Manager.

Set to Default

Sets the column information to the default settings. Name, Size, Modified, State, Type of the files are displayed by default.

top


Global Find and Replace dialog box

[Site Manager > Edit > Global Find and Replace...],

Find

Replace with

Find in site

Find in folder

Find in HTML documents only

Options

Results

Find

Enter the text to search for, or use the drop-down menu to select from strings used in previous searches.

Replace with

Select the check box if you want to replace found text with other text. Enter the replacement text, or use the drop-down menu to select from strings used in previous searches.

Find in site

Select this radio button to search within the current site. Only available if a site is open.

Find in folder

Select this radio button to search all the documents in a particular folder. Enter the path of the folder or click Browse... to find and select a folder in the Browse for Folder dialog box.

Select Include subfolders to include all the subfolders of the specified folder when performing this function.

Find in HTML documents only

Finds only from Web documents, such as html, htm, asp files.

Options

  • Match case
    Search only for occurrences of the Find text that have exactly the same capitalization as the Find text.
    For example, when you search for 'namo', 'Namo' and 'NAMO' will be ignored.
  • Match whole words only
    Search only for occurrences of the Find text that are whole words, not parts of words.
    For example. when you search for 'tree', 'treetop' and 'pinetree' will be ignored.
  • Match full-/half- width
    Select this check box to search only full-width or half-width characters.
  • Find in HTML sources
    Select this check box to search in HTML sources of the documents, rather than text visible in the Edit windows or browser.

Results

Shows the search results. The result shows the path and name of the documents that contains the word or phrase you have entered in the Find text box.

Double-click a document in the list to open it in Edit window. The found or replacement text will be highlighted.

top


Site Manager - Site tab

Local window - folder shortcut menu

Local window - file shortcut menu

Local window - Column header shortcut menu

Navigation window - shortcut menu

The Site tab consists of Local window, Navigation window, and Image Preview window. You can view the physical structure of the site, and manage files and folders in the Local window located on the left. On the other hand, Navigation window shows the logical structure of the site in a hierarchical tree and you can manage files only. Image Preview, located below the Local window, shows the preview of the file selected in the Local window.

Local window - folder shortcut menu

You can explore and edit the files and folders in the Local window. Double-click to expand or collapse the folder. Select folder(s) and right-click to open the shortcut menu.

  • New > Document...
    Creates a new document in the selected folder.
  • New > Folder
    Creates a sub-folder in the selected folder.
  • Cut
    Cuts the selected folder(s), and saves it to the clip board. You can also use the shortcut key <Ctrl + X>.
  • Copy
    Copies the selected folder(s), and saves it to the clip board. You can also use the shortcut key <Ctrl + C>.
  • Paste
    Pastes the folder(s), temporarily saved in the clip board, to the selected folder. If a folder of the same name exists in the selected folder, an alert message will appear. You can also use the shortcut key <Ctrl + V>.
  • Rename
    Renames the selected folder. If you want to rename the site, click the site name at the top of the list and select {Properties...} in the shortcut menu.
  • Delete
    Deletes the folder(s) and all the files in the selected folder(s).
  • Select All
    Selects all the files and folders in the current site. You can also use the shortcut key <Ctrl + A>.
  • Invert Selection
    Inverts the selection, that is, makes the selected files unselected and vice versa.
  • Enable Publish
    Includes the selected folder to the publishing. All of the folders in the site is enabled by default. If you disable this option, the designated folder name appears in gray in the Publish tab and cannot be published.
  • Source Control
    You can work with the Source Control. In case the current site is not added to a Source Control database, no Source Control option is activated.
  • Properties...
    Open the Properties dialog box. When the site folder at the top is selected, the Properties dialog box of the site will appear.

Local window - file shortcut menu

Select file(s) and right-click to open the shortcut menu. You can also add a folder or a document when using file shortcut menu.

  • New > Document...
    Creates a new document in the current folder.
  • New > Folder
    Creates a sub-folder under the current folder.
  • Open
    Opens the selected file(s) in the Edit window. You can also press the <Enter> key.
  • Save
    Saves the selected file(s). Enabled only when the selected file is modified. It is shown 'modified' in the State column when the file is modified.
  • Close
    Closes the selected file, if the file is open in the Edit window.
  • View with Internet Explorer
    Shows the selected file(s) in the Internet Explorer.
  • View with Netscape
    Shows the selected file(s) in the Netscape.
  • Cut
    Cuts the selected file(s), and saves it to the clip board. You can also use the shortcut key <Ctrl + X>.
  • Copy
    Copies the selected file(s), and saves it to the clip board. You can also use the shorcut key <Ctrl + C>.
  • Paste
    Pastes the file(s) in the clip board to the current folder. To paste the copied or cut file(s), select the folder in which you want to paste them. If a file with the same name exists in the selected folder, an alert message will appear. You can also use the shortcut key <Ctrl + V>.
  • Rename
    Changes the names of the selected file. If you have selected multiple files, it will change the name of the last selected file.
  • Delete
    Deletes the selected file(s). This operation is irrecoverable in the Site Manager. You can also press the shortcut key <Delete>.
  • Select All
    Selects all the files and folders in the current folder. You can also press the shortcut key <Ctrl + A>.
  • Invert Selection
    Inverts the selection, that is, makes the selected files unselected and vice versa.
  • Enable Publish
    Includes the selected file to the publishing. All of the files included in the site is enabled by default. If you disable this option, the designated filename appears in gray in the Publish tab and cannot be published.
  • Properties
    Open the Properties dialog box. When the site folder at the top is selected, the Properties dialog box of the site will appear.

Local window - column header shortcut menu

Right-click the header of the column to sort the listings. If you click Name in the header, files will be sorted by file name. Click again to select between ascending/descending order. Right-click in the column header to open the shortcut menu to select one of the following options.

  • Sort Ascending
    Sorts the listings in an ascending sequence. That is, this options lets you see files listed alphabetically when you right-click Name, small to large in case of Size, and old to new in case of Modified.
  • Sort Descending
    Sorts the listings in a descending sequence. That is, this options lets you see files listed alphabetically in Name, large to small in Size, and new to old in Modified.
  • Customize Columns...
    Opens the Customize Columns dialog box where you can customize the column header.

Drag the column header to the left or right to changes the arrangement of the headers. Clicking and dragging the column makes the column semi-transparent. Drag it and release the mouse button when it reaches the position where you want to locate the column.

Navigation window - shortcut menu

Navigation window shows the logical structure of the site in a hierarchical tree. You can modify the site structure by moving files from one location to another in the Navigation tree. Each document describes the status by displaying 'Editing' or 'Modified' message in the box. You can modify filenames and Navigation titles here. The shortcut menu is the same as that of the Local window except it has the Enable Navigation option instead of the Enable Publish option.

  • New > Document...
    Creates a new document in the child-level of the selected document.
  • New > URL...
    Adds a new URL in the child-level of the selected document. Use this option when you want to set a hyperlink to an external Web document.
  • Insert to Navigation...
    Inserts a document in the child-level of the selected document. Select a file in the Select File dialog box.
  • Insert Section...
    Inserts a section in the child-level of the selected document. Select a section in the Insert Section dialog box.
  • Remove from Navigation Tree
    Removes the selected document from the navigation tree. This function removes a file only from the Navigation Tree while the Delete menu removes the file physically from the site.
  • Enable Navigation
    Includes the selected document to the Navigation bar. This option is applied to all the documents in the Navigation window by default. If you disable Enable Navigation, the selected document boxes will change gray and will not be displayed on the Navigation bar.

For the Navigation window shortcut menus not explained here, refer to the Local window - file shortcut menu.

top


Site Manager - Report tab

Filter list

You can classify files in a site, verify links, and check errors such as orphan files.

  • Resources
    Shows types of files in HTML documents, Image files, CSS files, Flash files, URL, and Other files. Files of the selected type are listed with file information on the right window. You can customize the provided information type by selecting the [View > Customize Columns...] menu command and use Customize Columns dialog box.
  • Improper resources
    Shows types of improper resources such as orphan files. A file is an orphan file if it is not linked from or linked to any files in the site. Name, Size, Modified time, State, Type of the orphan files will be listed in the window on the right.
  • Hyperlinks
    Shows types of hyperlinks; Broken links and External links. A link is "broken" if it is not correctly directed. External links refers to the links that have been directed to the Web pages outside of your Web site. You cannot verify external links. In the window on the right shows the Source and Target of the hyperlinks. Source shows the improper HTML documents whose links are broken. Target shows the target file of the broken hyperlinks.

File list window

The File list window is located on the right side of the Report tab. This shows a list of files and related information of the selected resource. The types of information displayed in this window depends on the category of resource you select in the left resource list.


Site Manager - Publish tab

Local window

Image Preview

Remote window

Connect to/Disconnect from Remote site

Site Mode

Site publishing

Settings

Local window

  • File list
    Shows a list of files and folders of the site that is stored in your computer, which is normally defined as a local site. It is same as the Local window of Site tab. Click Put [image] to publish the selected files to the remote site.

Image Preview

Shows the preview of the image file selected in the Local window. The Image Preview is located below the Local window.

Remote window

  • Remote site drop-down menu
    Shows a list of the registered remote sites either by default or by your own registration. Select a remote site from the menu to connect directly. Click [image] to edit the remote site information or add a new remote site in the Remote Sites dialog box.
  • File list
    Shows a list of files that are published to the remote site. Click Get [image] to import the selected files from the remote site to the local computer. You can select multiple files by clicking the files while holding down the <Ctrl> key or the <Shift> key.

Connect to/Disconnect from Remote Site

Select a remote site from the drop-down menu in order to connect to the remote site directly. You can select the [Site > Publish > Connect] menu command or click Connect/Disconnect Remote Site [image]. When connected, files published in the remote site are displayed in the file list. By default, Name, Size, Modified time, State, Type of the folders and files in the remote site are displayed.

Select [Site > Publish > Disconnect] to disconnect from the remote site or click Connect/Disconnect Remote Site [image].

Site Mode

When you select the Publish tab of the Site Manager when the site is open, it is automatically changed to Site Mode. If you deselect Site Mode, you can publish files that are not included in the site. To select or deselect Site Mode, use the [Site > Publish > Site Mode] menu command.

It is recommended to build, or publish a Web site as a site. It is simply more convenient to manage files in a Web site.

Site publishing

You can publish any files from the local site to the remote site. If you want to publish any files stored in your hard disk other than files from the local site, deselect the Site Mode in the Local window shortcut menu. Then you can browse your hard disk and publish any selected files.

Settings

To publish your site, you have to store your remote site information. Click [image] then Remote Sites dialog box appears. Widely recognized ISPs (Internet Service Provider) are listed in the Remote Sites dialog box. If there is a remote site you wish to use, select it from the list and click Modify.... In the Remote Site Settings dialog box, enter User name and Password. If the Remote Site to which you wish to publish your files is not listed, click New... and add the remote site to the list in the Remote Sites dialog box.

Namo WebEditor has publish information of several widely used ISPs. If your Web hosting provider is not listed, or if your Web site resides on your own server or on a company server, you must add a new entry for the site list by clicking New... in the Remote Sites dialog box. Inquire with the ISP for detailed information. If the user name or password is changed, you have to modify the information accordingly in the Remote Site dialog box.

Files that should be converted to text files have to be registered. Select [Tools > Preferences...] and click on the Internet tab. Click the Extension... button to register extensions. By Default, ph, sh, and py extensions are registered.

top


What is Publishing?

What is publishing?

Once you've created a Web site and edited it to your satisfaction, you'll need to upload the site to a Web server. This 'uploading' of the files you've created for the Web site is called Publishing. To publish your Web site, you'll need an account and free disk space on a Web server. You can get a free account and disk space from various Internet Service Providers (ISPs) that offer free Web hosting services.

Before publishing a web site

An optional but highly recommended step before you publish is performing link verification through the entire site to check for bad links and other link problems. You can validate hyperlinks automatically in the Report tab of the Site Manager.

Publishing with the Site Manager

The Site Manager's Publish tab provides publishing features you can perform with a few clicks on the option buttons. You do not need additional FTP programs to upload or download files. The Publish tab is where you publish the Web site after creating and validating it with the help of the Site tab and Report tab.


Setting the publish information

It is important that you enter the correct publish information for successful publishing. Information on widely used ISPs is registered by default.

When selecting an ISP from the list

  1. Select the [File > Publish > Remote Site Settings...] menu command. Or select the [Site > Publish > Remote Site Settings...] menu command in the Site Manager, if it is open.
  2. In the Remote Sites dialog box, select an ISP and click Modify....
  3. The Remote Site Settings dialog box will appear. The Remote Site Settings dialog box is automatically filled out with the settings from the site that was selected in the Remote Sites dialog box.
  4. In the Remote Site Settings dialog box, enter your login ID for the FTP server in User name.
  5. Enter your login password in Password.
  6. Enter the HTTP Information, changing only the 'User ID' part of the URL to your ID.
  7. Click OK.
  8. Click Close in the Remote Site Settings dialog box.

When adding a new ISP

  1. Click New... in the Remote Sites dialog box.
  2. Enter a Site name in the Remote Site Settings dialog box. Any name that represents the remote site will be fine, since it will be used only to identify.
  3. Enter the address of the FTP server that is used to upload files to the Web site in Host. Do not include "ftp://". You have to enter the exact host name of FTP server.
  4. Enter the Port number to use when connecting to the FTP server. The default value, 21, should work in most cases.
  5. Enter the path of the directory on the FTP server that stores your Web documents in Directory. Usually, this is 'public_html'. If you're not sure what the HTML directory is, ask your network administrator or ISP.
  6. Enter your login ID for the FTP server in User name.
  7. Enter your login password in Password.
  8. Select Passive mode if the server is behind a firewall or gateway requiring passive mode. If you're not sure, ask your network administrator or ISP.
  9. Enter the URL used to access the Web site in a browser in the URL text box under HTTP Information.
  10. Click OK.
  11. Click Close in the Remote Sites dialog box.

    (Example settings of a WebEditor user who has 'namoman' as their user name.)

top


Connecting to remote site

When the remote site setting has been made, you can connect to the remote site.

  1. Click Publish [image] on the Standard Toolbar, or press the shortcut key <F4>. You can also select the [File > Publish > Publish...] menu command. If the Site Manager is open, select the Publish tab.
  2. The Publish tab of the Site Manager appears.
  3. Select a remote site from the Remote drop-down menu in the Remote window.
  4. A list of files and folders at the remote site will be listed when connected to the remote site.

The connection to the remote site fails if the remote site information you have entered is incorrect. When it happens, click the [image] button next to the Remote drop-down menu to open the Remote Sites dialog box and check the remote site information again.

Example

  1. Click Publish [image] on the Standard Toolbar.
  2. The Publish tab of the Site Manager appears.
  3. Select 'namo' from the Remote drop-down menu in the Remote window.
  4. Files and folders in the 'namo' remote site will be listed.


Publishing all files

When publishing your Web site for the first time, you have to publish all the files of your site to the Web server.

  1. Connect to the remote site to which you wish to publish your site.
  2. Select the Local window of the Publish tab by clicking anywhere inside the Local window.
  3. Select the [Edit > Select All] menu command, or press <Ctrl + A>.
  4. Click Put [image] on the toolbar to publish the files.
  5. A progress bar appears, showing the publishing status as the publishing advances.

  6. When publishing is over, the list of published files and folders will be shown in the Remote window.
  7. The message 'Publishing has finished successfully.' will appear.

You can publish various selected groups of files. Select the [Edit > Select Open] menu command to publish all the files that are currently open in the Edit window. Select [Edit > Invert Selection] to invert the current selection. For Example, the selected files will be unselected, and vice versa. Select the [Edit > Select Publish Failed] menu command to publish the files that have failed to be published. Select [Edit > Select Related] menu command to publish the files that are referred in the documents, such as image files.

Example

  1. Connect to the 'namo' remote site.
  2. Select the Local window of the Publish tab by clicking anywhere inside the Local window.
  3. Select the [Edit > Select All] menu command, or press <Ctrl + A>.
  4. Click Put [image] on the toolbar to publish the files.
  5. A progress bar appears, showing the publishing status as the publishing advances. When publishing is over, the list of published files and folders will be shown in the Remote window.
  6. The message 'Publishing has finished successfully.' will appear.


Publishing modified files only

Using the Publish tab of the Site Manager, you can upload only the files that have been modified since the last publishing.

  1. Connect to the remote site to which you wish to publish your site.
  2. Files and folders that have been published are listed in the Remote window.
  3. Select the [Edit > Select Modified] menu command. Only the modified files will be selected.
  4. Click Put [image] on the toolbar to publish the files.
  5. A progress bar appears, showing the publishing status as the publishing advances. When publishing is over, the list of published files and folders will be shown in the Remote window.
  6. The message 'Publishing has finished successfully' will appear.

You can publish various selected groups of files. Select the [Edit > Select Open] menu command to publish all the files that are currently open in the Edit window. Select [Edit > Invert Selection] to invert the current selection. For Example, the selected files will be unselected, and vice versa. Select the [Edit > Select Publish Failed] menu command to publish the files that have failed to be published. Select [Edit > Select Related] menu command to publish the files that are referred in the documents (image files, etc).

Example

  1. Connect to the 'namo' remote site.
  2. Files and folders that have been published are listed in the Remote window.
  3. Select the [Edit > Select Modified] menu command.
  4. Click Put [image] on the toolbar to publish the files.
  5. A progress bar appears, showing the publishing status as the publishing advances. When publishing is over, the list of published files and folders will be shown in the Remote window.
  6. The message 'Publishing is finished successfully' will appear.

top


Synchronizing the local/remote sites

You can synchronize the files in local site to the files in the remote site or vice versa. Using this command, the files in both sites can be kept identical.

  1. Connect to the remote site to which you wish to publish your site.
  2. Select the Publish tab of the Site Manager.
  3. Select the [File > Synchronize...] menu command, or click Synchronize [image] on the toolbar.
  4. In the Synchronize dialog box, choose your action that best suits your need;
  • Copy local site files to the remote site
    Copy local site files to the remote site. Files that are only in the local site will be published, and the files that are only in the remote site will be left unchanged unless you select Delete files that exist only on one side check box.
  • Copy remote site files to the local site
    Synchronizes the remote site to the local site. Files that are only in the remote site will be downloaded to the local hard drive, and the files that are only in the local site will be left unchanged unless you select Delete files that exist only in one side check box.
  • Copy files bi-directionally
    Synchronizes in bi-directional way. Files in only one side will be copied to the other.
    • Overwrite old files with new files
      Overwrites the old files with new files, if the same files exist in both side This option is selected as default.
    • Delete files that exist only on one side
      Deletes files that exist in only one side.
  • Click OK.

If you select the [Edit > Select Local] menu command before clicking Put [image] on the toolbar, all the files that exist only in the local hard drive will be selected. And if you select the [Edit > Select Remote] menu command before clicking Get [image] , all the files that exist only in the remote site will be selected. After the files are selected, click Put [image] or Get [image] to synchronize the files in both sites. This menu command provides the same feature that the Synchronize dialog box does.

Example

  1. Connect to the remote site to which you wish to publish your site.
  2. Select the Publish tab of the Site Manager.
  3. Click Synchronize [image] on the toolbar.
  4. Select Copy remote site files to the local site in the Synchronize dialog box.
  5. Click OK. All the files that only existed in the remote site will be downloaded to the local site.

top


Opening files from FTP server

You can open files located in the FTP server.

  1. Select the [File > Publish > Open FTP...] menu command.
  2. Select an FTP server from the Remote site drop-down menu in the Open FTP dialog box. If the server from which you want to open files is not listed in the drop-down menu, click [image] to add a new server to the list in the Remote Sites dialog box.
  3. As the connection is made to the server, files and folders in the server are listed in the list box.
  4. Select the files you wish to open.

  5. Click Open.

Example

  1. Select the [File > Publish > Open FTP...] menu command.
  2. Select 'namo' from the Remote site drop-down menu in the Open FTP dialog box.
  3. As the connection is made to the server, files and folders in the 'namo' server are listed in the list box.
  4. Select 'index_1.htm' from the list box.
  5. Click Open, and 'index_1.htm' will open in the Edit window.


Saving files to FTP server

You can save files to the FTP server.

  1. Select the [File > Publish > Save FTP...] menu command.
  2. The Save FTP dialog box appears.
  3. The name of the file to be saved appears in Filename.
  4. Select the remote site to which you wish to save the file from the drop-down menu or click [image] to open the Remote Sites dialog box. When you have specified the remote site, the connection to the remote site will automatically established.
  5. Click Save. The files are saved directly to the remote site.

When you repeat saving a file to the FTP server immediately after having already saving it once, the Save FTP dialog box appears with the recent remote site information and the connection to the remote site is made automatically.

Example

  1. Save 'favorite.htm', which was downloaded from the 'namo' remote site.
  2. Select the [File > Publish > Save FTP...] menu command.
  3. The Save FTP dialog box appears.
  4. 'favorite.htm' appears in Filename.
  5. Select 'namo' from the Remote site drop-down menu. The connection to the remote site will be made automatically.
  6. Click Save.


Downloading files from remote site

Downloading files from the remote site

  1. Connect to the remote site.
  2. When connected, files and folders at the remote site will be shown in the Remote window.
  3. Select all files that you wish to download.
  4. Select a folder in the Local window to save the downloaded files in.
  5. Click Get [image] on the toolbar, or select the [File > Get] menu command.

To select multiple files, hold down the <Ctrl> key and select each files. Hold down the <Shift> key and select one file, then another, to select all files between them.

When you perform an upload or download of files, the updated information may not be shown instantly. Click Refresh [image] to view the updated information immediately.

Example

  1. Connect to the remote site.
  2. The files and folders at the remote site will be shown in the Remote window, when connected.
  3. Select 'new_1.htm', and 'new_2.htm'.
  4. In the Local window, select a folder to save the files in.
  5. Click Get [image] on the toolbar.
  6. The selected files will be listed in the Local window, under the directory you have specified.


Deleting files at the remote site

In the Publish tab of the Site Manager, you can delete any files located in the remote site.

  1. Connect to the remote site.
  2. When connected, files and folders of the remote site will be listed in the Remote window.
  3. Select a file to delete.
  4. Select the [File > Delete] menu command, or click Delete [image] on the toolbar. You can also select {Delete} in the shortcut menu.
  5. The message 'This operation will completely remove the selected files from the remote site. (No Undo) Do you want continue?' appears. Click Yes and the selected file(s) will be deleted.

If you wish to delete files which are only in the remote site, select the [Edit > Select Remote] menu command and click Delete [image] on the toolbar.

You can delete multiple files from the remote site. Hold down the <Ctrl> key and individually select all files to be deleted. Select a file, then another, while holding down the <Shift> key to delete all files between.

Example

  1. Connect to the remote site.
  2. When connected, files and folders at the remote site will be listed in the Remote window.
  3. Select 'new_1.htm'.
  4. Select {Delete} in the shortcut menu.
  5. The message 'This operation will completely remove the selected files from the remote site. (No Undo) Do you want continue?' appears. Click Yes and the selected file(s) will be deleted.


Changing the character set

It is suggested to check whether the character set of your Web documents are properly specified before publishing the site. You can change the character set of multiple documents at once. If you wish to change the character set for each document, use the General tab of the Document Properties dialog box.
  1. Select the [Tools > Change Character Set...] menu command, or select the [Tools > Change Character Set...] menu command in the Site Manager.
  2. In the Change Character Set dialog box, select the new encoding method to apply from the Change Character set to drop-down menu. The Internet code associated with the selected character set will be displayed on the right. Select 'user-defined' to leave the character set unspecified.
  3. Select the documents to which the character set should be applied. Select Currently open documents to apply the character set to all documents that are currently open in the Edit window. Select Selected documents in the site to choose from a list of documents. Every Web document in the site is selected by default.
  4. Click OK.

The character set is specified inside the meta tag of HTML documents. Following is an example of the 'Unicode(UTF-8)' character set inserted as a meta tag.
<meta http-equiv="content-type" content="text/html; charset=utf-8">

Example

  1. Select the [Tools > Change Character Set...] menu command
  2. In the Change Character Set dialog box select 'Western European (ISO)' as the new character set.
  3. Select Selected documents in the site.
  4. Click OK.

top


Converting file names to lowercase

Some Web server systems distinguish lowercase letters from capital letters, causing some files to not properly appear when published. In such cases, convert the file names to lowercase and publish again.

  1. Select the [Tools > Convert Filenames to Lowercase...] menu command in the Site Manager.
  2. An alert message "This action cannot be undone. Are you sure you want to convert all the hyperlinks, filenames and folder names in the site '**' to lowercase?" will appear.

  3. Click Yes to confirm.

This action converts all the hyperlinks, folder names, and documents in the site to lower case. To use this command, the files should be created as a site.


Site Manager - Publish tab

[Window > Site Manager - Publish tab]

Local window

Image Preview

Remote window

Connect to/Disconnect from Remote site

Site Mode

Site publishing

Settings

Local window

  • File list
    Shows a list of files and folders of the site that is stored in your computer, which is normally defined as a local site. It is same as the Local window of Site tab. Click Put [image] to publish the selected files to the remote site.

Image Preview

Shows the preview of the image file selected in the Local window. The Image Preview is located below the Local window.

Remote window

  • Remote site drop-down menu
    Shows a list of the registered remote sites either by default or by your own registration. Select a remote site from the menu to connect directly. Click [image] to edit the remote site information or add a new remote site in the Remote Sites dialog box.
  • File list
    Shows a list of files that are published to the remote site. Click Get [image] to import the selected files from the remote site to the local computer. You can select multiple files by clicking the files while holding down the <Ctrl> key or the <Shift> key.

Connect to/Disconnect from Remote Site

Select a remote site from the drop-down menu in order to connect to the remote site directly. You can select the [Site > Publish > Connect] menu command or click Connect/Disconnect Remote Site [image]. When connected, files published in the remote site are displayed in the file list. By default, Name, Size, Modified time, State, Type of the folders and files in the remote site are displayed.

Select [Site > Publish > Disconnect] to disconnect from the remote site or click Connect/Disconnect Remote Site [image].

Site Mode

When you select the Publish tab of the Site Manager when the site is open, it is automatically changed to Site Mode. If you deselect Site Mode, you can publish files that are not included in the site. To select or deselect Site Mode, use the [Site > Publish > Site Mode] menu command.

It is recommended to build, or publish a Web site as a site. It is simply more convenient to manage files in a Web site.

Site publishing

You can publish any files from the local site to the remote site. If you want to publish any files stored in your hard disk other than files from the local site, deselect the Site Mode in the Local window shortcut menu. Then you can browse your hard disk and publish any selected files.

Settings

To publish your site, you have to store your remote site information. Click [image] then Remote Sites dialog box appears. Widely recognized ISPs (Internet Service Provider) are listed in the Remote Sites dialog box. If there is a remote site you wish to use, select it from the list and click Modify.... In the Remote Site Settings dialog box, enter User name and Password. If the Remote Site to which you wish to publish your files is not listed, click New... and add the remote site to the list in the Remote Sites dialog box.

Namo WebEditor has publish information of several widely used ISPs. If your Web hosting provider is not listed, or if your Web site resides on your own server or on a company server, you must add a new entry for the site list by clicking New... in the Remote Sites dialog box. Inquire with the ISP for detailed information. If the user name or password is changed, you have to modify the information accordingly in the Remote Site dialog box.

Files that should be converted to text files have to be registered. Select [Tools > Preferences...] and click on the Internet tab. Click the Extension... button to register extensions. By Default, ph, sh, and py extensions are registered.

top


Remote Sites dialog box

[File > Publish > Remote Site Settings...]

You can set the information of the remote site to which you wish to publish your site. The site list shows a list of Web sites to which you can publish your site or documents. Initially, the site list contains several popular Web hosting providers, such as GeoCities and Tripod. If you have an account with one of these providers, just select that provider from the list and click Modify... to add your account information.

If your Web hosting provider is not listed, or if your Web site resides on your own server or on a company server, you must add a new entry into the site list by clicking Add.... This will open the Remote Site Settings dialog box, where you enter the information for the new site.

Remote site list

The list box lists the existing Web sites that are available for publishing your site.

Remote Site Information

Shows remote site information such as Host, Port, Directory, Passive mode, and URL information.

Buttons

  • New...
    Click to add a new remote site.
  • Modify...
    Click to modify information of the selected remote site. Select a remote site from the remote site list and click Modify....
  • Delete
    Click to remove the selected remote site from the list.
  • Close
    Closes the Remote Site Settings dialog box.

top


Remote Site Settings dialog box

[File > Publish > Remote Site Settings... - New.../Modify... button]

Site name

FTP Information

HTTP Information

When adding a new site, the Remote Site Settings dialog box is automatically filled out with the settings from the remote site that was selected in the Remote Sites dialog box after clicking the Add... button. To specify the settings for the new site, simply change the items that are different from the existing site.

Site name

Enter a name for the remote site. This name is only used to identify remote sites. Enter a name that best represents the site. For example, enter just 'namo' for 'namo interactive'.

FTP Information

  • Host
    Enter the address of the FTP server that is used to upload files to the Web site. Do not include "ftp://".
    Examples: ftp.namo.com
    210.101.143.254
  • Port
    Specify the port number to use when connecting to the FTP server. The default value, 21, should work in most cases.
  • Directory
    Enter the path of the directory on the FTP server that stores your Web documents. Usually, this is 'public_html'. If you're not sure what the HTML directory is, ask your network administrator or ISP.
  • User name
    Enter your login ID for the FTP server.
  • Password
    Enter your login password.
  • Passive mode
    Select this option if the server is behind a firewall or gateway requiring passive mode. If you're not sure, ask your network administrator or ISP.

HTTP Information

  • URL
    Enter the URL used to access the Web site in a browser. This information is used by Namo WebEditor when you save a document directly to the site using the Save As command.
    Examples: http://www.mysite.com

      • http://members.yourisp.com/~myname

top


Change Character Set dialog box

[Site Manager - Tools > Change Character Set...]

You can change the language encoding (character set) of all open documents or all documents in a site at once.

Why specify a character set?

Specifying a character set helps to ensure that your documents will be seen correctly by your site visitors. This is especially important if your documents contain non-Western European text. If, for instance, you have a document that contains Chinese text, but you do not set the document's language encoding to one of the Chinese character sets, the document will not be legible to visitors whose browsers are set to use Western European encoding as default. Specifying the correct language encoding ensures that a browser will properly display the document, whenever possible.

Change character set to

Specifies the encoding method to apply to the documents. A character set must be chosen from the drop down menu. The Internet code associated with the selected character set will be displayed on the right. Select user-defined to leave the character set unspecified.

Target

  • Currently open documents
    Applies the selected character set to all the documents currently open in the Edit window.
  • Selected documents in the site
    Applies the character set to only selected documents. All of the documents are selected by default. Hold down the <Shift> key while clicking to select multiple contiguous items; hold down the <Ctrl> key while clicking to select multiple discontinuous items.

OK

Click to apply the selected character set to the specified documents.

Cancel

Click to close the dialog box without changing the language encoding (character set).

If you change the language encoding of documents that are not open in the Edit window, the change cannot be undone. Remember to use the Document Properties dialog box when changing the character set for each document.

If a site visitor's browser is not capable of displaying a particular language, documents using that language will not be legible in their browser even if you properly set the language encoding.

top


Change Permissions dialog box

[Site Manager Publish tab - Remote window file shortcut menu {Change Permissions...}]

Owner/Users in group/All users

Decimal code

Quick setup

You can decide the permission of file use classified by user groups, only if you have the authority to change permission of the files on the remote site server. If you use a public ISP as a remote site, it is not likely that you have such authority.

Owner/Users in group/All users

  • Owner
    Permission that the owner has over the file. Generally all Readable/Writable/Executable permissions are granted.
  • Users in group
    Permission for users who are of the user group as authors.
  • All users
    Permission for all other users. Readable/Executable is generally granted.
    • Readable | Permission to read the document. If this is not granted, you cannot open the document in your web browser.
Writable | Permission to make changes to the document, including deleting. Generally this is granted only to the author.
Executable | Permission to execute the document. CGI files cannot be executed without this permission.

Decimal code

You can specify the permissions in number. Each digit represents the permission for the owner, users in group, and all users respectively.

7 | Readable/Writable/Executable
6 | Readable/Writable
5 | Readable/Executable
4 | Readable
0 | No permission

Quick setup

  • Public [644]
    Readable/Writable for the owner, and only Readable for others.
  • CGI [755]
    Readable/Writable/Executable for the owner, and Readable/Executable for others. Usually used in CGI files.
  • Private [600]
    Readable/Writable for the owner, and no permission for others.

t6op


Open FTP/Save FTP dialog box

[File > Publish > Open FTP.../Save FTP...]

Remote site

File list window

Tool buttons

Filename

Open

Save

Remote site

Shows a list of remote sites that are registered in Namo WebEditor. Select from the drop-down menu to directly connect to the remote site. Click [image] to open the Remote Sites dialog box where you can edit current remote site properties or add a new remote site.

File list window

Shows files and folders that are currently uploaded in a selected remote site. Name, size , and modified date and time are displayed.

Tool buttons

  • Up One Level
    Moves to the folder one level higher.
  • Create New Folder
    Creates a new folder at the current level.
  • List
    Displays the files and folders as smaller icons.
  • Details
    Displays the details of files and folders such as size and modification data, as well as name.

Filename

Displays the name of the selected file.

Open

Opens the selected file in the Edit window.(Open FTP dialog box)

Save

Uploads the selected file to the remote site.(Save FTP dialog box)

top


Synchronize dialog box

[Site Manager - File > Synchronize...] Synchronize

You can synchronize the files at the local site with the files at the remote site or vice versa. Using this command, the files in both sites can be kept identical.

  • Copy local site files to the remote site
    Synchronizes the local site with the remote site. Files that are only in the local site will be published, and the files that are only in the remote site will be left unchanged unless you select Delete files that exist only on one side check box.
  • Copy remote site files to the local site
    Synchronizes the remote site with the local site. Files that are only in the remote site will be downloaded to the local hard drive, and the files that are only in the local site will be left unchanged unless you select Delete files that exist only on one side check box.
  • Copy files bi-directionally
    Synchronizes in a bi-directional way. Files at only one site will be copied to the other.
  • Overwrite old files with new files
    Overwrites the old files with new files, if the same filenames exist at both sites. This option is selected as default.
  • Delete files that exist on only one site
    Deletes files that exist at only one site.


Web Documents and Styles

Styles in Web documents

Styles refer to the appearance of a document. Styles include various elements of a Web document such as font type, font size, font color, line height, paragraph spacing, and document margins, all of which determine a document's appearance and display. You can modify the styles of a document in two ways--using HTML tags or applying Cascading Style Sheet (CSS). Using CSS allows you to apply various styles to the Web documents by integrating various functions which are not supported by simple HTML tags.

Refer also to the overview of Style for further information on Styles.

Application of styles to different elements of a Web document

Styles can be divided into font style, paragraph style, and document style based on the type of element each style is applied to. Font styles are applied to one character or multiple characters, and modify the shape of the selected characters. Paragraph styles are applied to one paragraph or multiple paragraphs, and modify the properties of the selected paragraphs. A document style is applied to the entire document. So, commonly used document styles can be standardized and used as document templates.


Character Formats and Paragraph Formats

Character formats

Character formats are applied to selected characters and can be used to edit the character shape. Character formats can be applied to a single character, but can expand the range of application according to the area you have selected. Character formats includes font type, font size, font color, text background color, font style (Bold, Italic, Underline, Strikethrough, Monospaced, Superscript, Subscript, Blinking, etc), letter spacing, word spacing, and so on. To change the character formats, you should first select the text to which you intend to apply the desired format.

Paragraph formats

Paragraph formats are used to edit the appearance of selected paragraph(s). Paragraph formats have one paragraph as its minimum unit of application. Paragraph formats can be applied to the alignment, list style, indentation, margin, and spacing of any selected paragraphs. You must place the cursor at the target paragraph to modify the format of a particular paragraph. If you want to apply a certain paragraph format to multiple paragraphs, first select the area then specify the paragraph format.

Activate Show/Hide Paragraph Marks [image] on the Standard Toolbar to display Paragraph Marks ( [image]) in the Edit window.


Document Styles and Templates

A document style is style that is applied to the entire document. Multi-column documents are composed using tables with invisible borders. A frameset document is also one of the main tools used to draw a document layout. Below are the general elements constituting document style.

  • Text color
  • Background color
  • Document margins
  • Background images
  • Background sounds, etc.

Document templates

Commonly used document styles can be standardized and used as document templates. Namo WebEditor offers various document templates with different editing layouts such as 'Two column body' or 'Three column body,' as well as useful frameset document templates. You can shorten editing time by selecting the relevant templates in the Component or Document folder of the Resource Manager which opens when you select the [File > New..] menu command.

Section templates

Namo WebEditor offers section templates as well as document templates. Section refers to a set of documents constituting some part of your Web site, and Section Template refers to a customized set of commonly used sections. Usually several documents are gathered together as a group, making up a section. For example, the section 'mysection' is made up of two documents - report1 and report2.

--> A section which is made up of two documents - report 1 and report 2.

top


Working with Formats in Namo WebEditor

You can edit text and paragraphs using the Formatting Toolbar in Namo WebEditor.

Functions of Formatting Toolbar buttons

HTML Style | Used when you want to modify the HTML Style. You can choose HTML Styles, such as 'Heading1', "Heading2', 'Bulleted list', 'Numbered list' from HTML Style list.
CSS Style | Used when you want to apply CSS styles. The list of CSS Styles is displayed only if you have defined the style for your document.
Font | Used when you want to modify the font of your text. The list of fonts is not displayed if you uncheck Display actual fonts in font menu in the Edit tab in the Preferences dialog box.
Font Size | Used when you want to modify the font size. You can enter the desired size directly if want to specify a size other than those available in the drop-down list.
Bold | Makes the text bold.
Italic | Makes the text slanted.
Underline | Adds underline to the text.
Font Color | Modifies the font color. Choose the color from the Color Picker Pop-up.
Text Background Color | Modifies the text background color.
Clear Character Format | Removes all attributes applied to the text.
Align Left | Aligns the paragraph at the left margin.
Align Center | Aligns the paragraph at the center.
Align Right | Aligns the paragraph at the right margin.
Numbered List | Creates a numbered list.
Bulleted List | Creates a bulleted list.
Decrease Indent | Decreases the indentation of the paragraph.
Increase Indent | Increases the indentation of the paragraph.

You can also apply other formats not offered on the Formatting Toolbar. Select the [Format > Font...] menu command to apply an extra character format in the Character Format dialog box, and the [Format > Paragraph...] to apply an extra paragraph format in the Paragraph Format dialog box.

Buttons other than those offered on the Formatting Toolbar can be added by selecting the [View > Toolbars > Customize...] menu command.

top


Changing fonts

You can apply various kinds of atmosphere to the document by changing fonts of the document.

  1. Select the text you wish to modify.
  2. Select the desired font from the Font drop-down menu on the Formatting Toolbar.

You can hide the actual fonts in the font menu by unchecking Display actual fonts in font menu in the Edit tab in the Preferences dialog box.

Example

  1. Select the text you wish to modify.

    2. Let me introduce Namo WebEditor.

  2. Select 'Times New Roman' from the Font drop-down menu on the Formatting Toolbar.

    3. Let me introduce Namo WebEditor.


Modifying the font size

You can modify the size of text you have selected. To modify the font size minutely, use the Text tab of the Style dialog box.

  1. Select text to modify its font size.
  2. Choose the font size from the Font Size drop-down menu on the Formatting Toolbar. If a font size larger than '72 pt' is desired, enter the size directly.

To apply various font styles to your text, select the [Format > Font...] menu command and click the Extended Styles tab. Click the Style... button and specify the styles you want in the Font tab of the Style dialog box.

You can also increase or decrease the font size by selecting the [Format > Character > Increase Size] or [Format > Character > Decrease Size] menu command. The size specified by the CSS cannot be modified by these commands.

Example

  1. Select text to modify its font size.

    2. Let me introduce Namo WebEditor.

  2. Choose '4 (14 pt)' from the Font Size drop-down menu on the Formatting Toolbar.

    3. Let me introduce Namo WebEditor.

top


Modifying font colors

You can modify color of the selected text.

  1. Select text to modify its color.
  2. Modify the color of the selected text by clicking Font Color [image] on the Formatting Toolbar. Colors other than the 216 basic colors can be applied by clicking Color Picker icon [image] and selecting the desired color in the Color Picker dialog box.

Example

  1. Select text to modify its color.

    2. Let me introduce Namo WebEditor.

  2. Click Font Color [image] on the Formatting Toolbar and select Color Picker [image] .
  3. Select pink in the Color Picker dialog box and click OK.

    4. Let me introduce Namo WebEditor.

You can copy the font color of other text using the dropper [image] in the Color Picker dialog box.


Modifying the text background color

You can apply background color to the selected text.

  1. Select text to modify its background color.
  2. To modify the text background color, click Text Background Color [image] on the Formatting Toolbar and choose the desired color.

Example

  1. Select text to modify its background color.

    2. Let me introduce Namo WebEditor.

  2. Click Text Background Color [image] on the Formatting Toolbar and choose 'Green(#008000)' from the Color Picker Pop-up.

    3. Let me introduce Namo WebEditor.


Changing text styles

Use the Formatting Toolbar to apply commonly used character styles to the selected text.

  1. Select text to modify its style.
  2. Modify the font style by clicking Bold [image], Italic [image] or Underline [image] on the Formatting Toolbar. To undo the modification, click the button again.

To apply styles other than those offered on the Formatting Toolbar, use the Character Format dialog box by selecting the [Format > Font...] menu command.

  1. Select text to modify its style.
  2. Select the [Format > Font...] menu command.
  3. Check the styles you want from among Bold, Italic, Underline, Strikethrough, Monospaced, Superscript, Subscript in the Character tab in the Character Format dialog box.
  4. Click OK.

Example

  1. Select text to modify its style.

    2. Let me introduce Namo WebEditor.

  2. Select the [Format > Font...] menu command.
  3. Check Superscript in the Character tab in the Character Format dialog box.
  4. Click OK.

    5. Let me introduce Namo WebEditor.


Specifying the letter spacing

You can adjust the spacing between letters or words to widen or reduce it.

  1. Select the area whose letter spacing should be changed.
  2. Select the [Format > Font...] menu command.
  3. Select the Extended Styles tab in the Character Format dialog box.
  4. Set Letter spacing and Word spacing under Spacing and click OK.

Example

  1. Select the area whose letter spacing should be changed.

    2. Let me introduce Namo Web Editor.

  2. Select the [Format > Font...] menu command.
  3. Select the Extended Styles tab in the Character Format dialog box.
  4. Set Letter spacing to '2 point' and Word spacing to '1 point'.
  5. Click OK.

    6. Let me introduce Namo WebEditor.


Removing character formats

You can remove all the character formats from text at one time.

  1. Select text for character format removal.
  2. Click Clear Character Format [image] on the Standard Toolbar or select the [Format > Character > Clear All Formats] menu command. You can also use the shortcut key <Ctrl + E>.

Example

  1. Select text for character format removal.

    2. Let me introduce Namo Web Editor.

  2. Click Clear Character Format [image] on the Standard Toolbar.

    Let me introduce Namo Web Editor.

To remove all CSS style formats from selected text, choose the [Format > Paragraph Style...] menu command and click Remove All Attributes at the Class tab of the Style dialog box.


Specifying character styles

You can apply various font properties to text.

  1. Select the text to which the character style should be applied.
  2. Select the [Format > Font...] menu command.
  3. Select the Extended Styles tab in the Character Format dialog box.
  4. Click Style....
  5. In the Style dialog box, specify the desired styles.
  6. Click OK.

Example

  1. Select the text to which the character style should be applied.

    2. Let me introduce Namo WebEditor.

  2. Select the [Format > Font...] menu command.
  3. Select the Extended Styles tab in the Character Format dialog box.
  4. Click the Style... button.
  5. In the Font tab in the Style dialog box, set Primary Font to 'Times New Roman' and Size to '12 point'.
  6. In the Layout tab, set Foreground to 'blue' by selecting the blue color from the Foreground drop-down Color Pop-up.
  7. In the Text tab, set Letter spacing to '1 point'.
  8. In the Box tab, set Left, Right, Top, Bottom to '1 point'.
  9. Click OK.

    10. Let Me Introduce Namo WebEditor.


Copying character formats

You do not need to repeat specifying the same character format again and again to apply it to different parts of the document. You can take care of these repeated actions using the Copy Format menu.

  1. Place the cursor within the item whose attributes you wish to copy.
  2. Select the [Edit > Copy Format...] menu command or press the shortcut key <Shift + F2>.
  3. The Copy Format dialog box is opened. Check Character attributes and click OK.
  4. Select the text to which copied formats should be applied.
  5. Select the [Edit > Paste Format] menu command or press the shortcut key <F2>.

The Copy Format option is not available if text is selected or blocked. Before using the option, simply place the cursor within the item whose attributes you wish to copy; do not select the item. To copy the attributes of an image or chart, click the image or chart so that its resize handles are visible, then use the Copy Format option.

Example

  1. Select the text whose attributes should be copied.

  2. Press the shortcut key <Shift+F2>.
  3. The Copy Format dialog box is opened. Check Character attributes and click OK.
  4. Select the text to which copied formats should be applied.

    5. Let me introduce Namo DeepSearch.

  5. Press the shortcut key <F2>.

    6. Let me introduce Namo DeepSearch.

top


Modifying paragraph styles

You can change the appearance of paragraphs by changing paragraph properties such as alignment, indentation, or spacing.

  1. Select the paragraph whose style should be modified.
  2. Select the [Format > Paragraph...] menu command.
  3. The Paragraph Format dialog box is opened.
  4. Specify Alignment, Indentation, and Spacing at the Indentation and Spacing tab of the Paragraph Format dialog box.
  5. Click OK.

Example

  1. Select the paragraph whose style should be modified.
  2. Select the [Format > Paragraph...] menu command.
  3. The Paragraph Format dialog box is opened.
  4. Set Alignment to 'Center', Indentation: Left to '2 point' and Spacing to '1.5 Lines' at the Indentation and Spacing tab of the Paragraph Format dialog box..
  5. Click OK.

Select the paragraph.

Select the paragraph.

Select the paragraph.

Select the paragraph.

Select the paragraph.


Aligning paragraphs

You can align paragraphs to the right, left, or center of the document.

  1. Place the cursor at the paragraph you wish to align.
  2. Select Align Left [image], Align Center [image] or Align Right [image] on the Formatting Toolbar.

If you wish to justify the paragraph, select the [Format > Paragraph...] menu command and set Alignment to 'Justify' in the Indentation and Spacing tab of Paragraph Format dialog box.

Example

  1. Place the cursor at the paragraph you wish to align.
  2. Click Align Center [image] on the Formatting Toolbar.

    3. Namo WebEditor
    Namo WebEditor
    Namo WebEditor
    Namo WebEditor
    Namo WebEditor


Setting the indentation

You can set the paragraph indentation.

  1. Place the cursor at the paragraph where indentation should be applied.
  2. Select Decrease Indent [image] or Increase Indent [image] on the Formatting Toolbar.

You may indent only the first line of a paragraph by selecting the [Format > Paragraph...] menu command and setting First line in the Indents and Spacing tab of the Paragraph Format dialog box.

Example

  1. Place the cursor at the paragraph where indentation should be applied.

  2. Select Increase Indent [image] on the Formatting Toolbar.

      3. Namo WebEditor
      Namo WebEditor
      Namo WebEditor
      Namo WebEditor
      Namo WebEditor


Creating numbered lists

You can convert paragraphs to the numbered lists. You can choose various types of number list, such as number, English alphabet (uppercase/lowercase) or Roman numeral (uppercase/lowercase).

  1. Select the paragraph that should be converted to a list.
  2. Click Numbered List [image] on the Formatting Toolbar.
  3. To modify the list type, select {Paragraph and List Properties...} in the shortcut menu.
  4. In Style and List Options tab in the Paragraph Format dialog box, select the number type in Number format and set the starting number in Start numbering at.
  5. Click OK.

Example

  1. Select the paragraph that should be converted to a numbered list.

    2. Select the Paragraph

    Select the Paragraph

    Select the Paragraph

  2. Click Numbered List [image] on the Formatting Toolbar.
    1. Select the Paragraph
    2. Select the Paragraph
    3. Select the Paragraph


Creating bulleted lists

  1. Select the paragraphs to which the bulleted list should be applied.
  2. Select Bulleted List [image] on the Formatting Toolbar.
  3. Select {List Item Properties...} in the shortcut menu to change the list properties.
  4. In the Bulleted List Item Properties dialog box, choose the type of bulleted list and click OK.

Example

  1. Select the paragraphs to which the bulleted list should be applied.

    2. Select the Paragraphs

    Select the Paragraphs

    Select the Paragraphs

  2. Select Bulleted List [image] on the Formatting Toolbar.
    • Select the Paragraphs
    • Select the Paragraphs
    • Select the Paragraphs


Creating multi-hierarchy lists

You can construct a multi-hierarchy list using the listing and indenting features.

  1. Select the paragraph you wish to convert to a list.
  2. Click Numbered List [image] on the Formatting Toolbar.
  3. Select the items that should be placed at the next level in the hierarchy.
  4. Click Increase Indent [image] on the Formatting Toolbar.

You can apply different list formats by selecting Bullet type or Number in the Style and List Options tab in the Paragraph Format dialog box.

Example

  1. Create a numbered list in the Edit window.
    1. Title 1
    2. Item A
    3. Item B
    4. Item C
    5. Title 2
    6. Title 3
  2. Select the items you want to place at the next level in the list hierarchy.
    1. Title 1
    2. Item A
    3. Item B
    4. Item C
    5. Title 2
    6. Title 3
  3. Click Increase Indent [image] on the Formatting Toolbar.
    1. Title 1
      1. Item A
      2. Item B
      3. Item C
    2. Title 2
    3. Title 3

top


Merging lists and splitting a list

Every item in a list is regarded as one unit, which makes the modification of style apply to the whole list. However, if you split a list into two, the application of style to one list does not influence the other. Activating Show/Hide Special Tag Marks on the Formatting Toolbar will mark the starting position of a list as a red arrow( [image]).

Splitting a list

  1. Place the cursor at the item where a new list should start.
  2. Select the [Format > Split List] menu command or press a shortcut key <Shift + F8>.

If you split a numbered list, the starting number of the newly created list will be 1.

Once a list has been split, changing the list format of one list does not affect the other list.

Example:

Before splitting

After splitting

  1. Site Management
  2. Image Effects
  3. Database Support
  4. Themes/Templates
  5. Table Editing
  1. Site Management
  2. Image Effects
  3. Database Support
  1. Themes/Templates
  2. Table Editing

Merging two lists

  1. Place the cursor at the first item of the second list.
  2. Select the [Format > Merge Lists] menu command or press the shortcut key <F8>.

When two lists that have different list formats are merged, the format of the first list is used.

Example:

Before merging

After merging

  • Site Management
  • Image Effects
  • Database Support
  • Themes/Templates
  • Table Editing
  • Site Management
  • Image Effect
  • Database Support
  • Themes/Templates
  • Table Editing

top


Modifying HTML styles

You can apply headings or list styles to a paragraph.

  1. Place the cursor at the paragraph you wish to modify. To modify the style of more than 2 paragraphs, select them by dragging.
  2. Select the paragraph style from the HTML Style drop-down menu on the Formatting Toolbar.

Paragraph style is applied to the lines separated by the <br> tag ( [image]) because the lines divided by <br> ( [image]) are regarded as one paragraph. On the other hand, lines divided by pressing <Enter> are regarded as separate paragraphs. You can easily discriminate between <br> ( [image]) and the paragraph mark ( [image]) by activating the Show/Hide Paragraph Marks [image] on the Standard Toolbar.

Example

  1. Place the cursor at the paragraph whose style should be modified.
  2. Select 'Heading 3' from the HTML Style drop-down list on the Formatting Toolbar.

  3. The style of the paragraph where the cursor has been placed is changed.

top


Setting the line height

You can adjust the line height in a paragraph.

  1. Place the cursor at the paragraph where line height should be applied.
  2. Select the [Format > Paragraph...] menu command.
  3. In the Indentation and Spacing tab of the Paragraph Format dialog box, select the desired type of spacing from the Presets drop-down menu. Presets is a list of commonly used spacing formats. If you wish to apply spacing formats other than those provided in the Presets, enter the desired number in the Line height text box and select its unit from the drop-down list right beside it.
  4. Click OK.

Example

  1. Place the cursor at the paragraph where line height should be applied.
  2. Select the [Format > Paragraph...] menu command.
  3. In the Paragraph dialog box, select Double from the Presets drop-down menu. The Line height text box is automatically specified at '200%'.
  4. Click OK.

    5. Let me introduce Namo DeepSearch.
    Let me introduce Namo DeepSearch
    Let me introduce Namo DeepSearch.


Specifying paragraph styles

You can set the paragraph style using CSS. You can specify font, font size, style, font colors, background image, alignment, line height, borders, etc in each tab of the Style dialog box.

  1. Place the cursor at the paragraph to which styles should be applied.
  2. Select the [Format > Paragraph Style...] menu command.
  3. In the each tab of the Style dialog box, specify the styles you wish to apply.
  4. Click OK.

Example

  1. Place the cursor at the paragraph to which styles should be applied.
  2. Select the [Format > Paragraph Style...] menu command.
  3. The Style dialog box is opened.
  4. In the Layout tab of the Style dialog box, set Foreground to 'blue' from the Color Picker Pop-up.
  5. Click OK and the specified style is applied to the paragraph where the cursor has been placed.


Copying paragraph styles

You do not need to repeat specifying the same paragraph properties again and again to apply them to different paragraphs of the document. You can take care of these repeated actions using the Copy Format menu. In other words, you can easily copy a specify paragraph style and apply it to the selected paragraphs.

  1. Place the cursor at the paragraph whose style should be copied. Just place the cursor and do not select the paragraph.
  2. Select the [Edit > Copy Format...] menu command or press the shortcut key <Shift + F2>.
  3. In the Copy Format dialog box, check Paragraph style and click OK.
  4. Place the cursor at the paragraph to which the copied style should be applied.
  5. Select the [Edit > Paste Format] menu command or press the shortcut key <F2>.

Example

  1. Place the cursor at the paragraph whose style should be copied.

  2. Press the shortcut key <Shift + F2>.
  3. In the Copy Format dialog box, check Paragraph style and click OK.
  4. Place the cursor at the paragraph to which the copied style should be applied.
  5. Press the <F2> key. The copied paragraph style is now applied to the paragraph containing the mouse-pointer.

    6. Let me introduce Namo DeepSearch.

    Let me introduce Namo DeepSearch.

    Let me introduce Namo DeepSearch.

    Let me introduce Namo DeepSearch.

top


Setting the background color

You can apply background color to a Web document. You can also copy another background color and apply it to the current document using Import Colors....

  1. Select the [File > Document Properties...] menu command.
  2. In the Document Properties dialog box, select the Appearance tab.
  3. Select the background color from the drop-down Color Picker Pop-up.

  4. Click OK and the selected background color is applied to the current document.

You can copy the background color of another document by clicking Import Colors... and specifying the relevant document in the Document Properties dialog box. The background color of the selected document is applied to the current document.

You can use an image as your background by specifying Background image in the Appearance tab of the Document Properties dialog box.


Setting page margins

You can specify left and top margins to a document in the Styles tab in the Document Properties dialog box..

  1. Select the [File > Document Properties...] menu command.
  2. Select the Styles tab in the Document Properties dialog box.
  3. Specify Left and Top under Margins by entering the values or by using the increase/decrease button.
  4. Click OK.


Using document templates

You can apply various document templates, such as 2-column/3-column document, to the new document.

  1. Select the [File > New...] menu command.
  2. The Resource Manager is opened. Click Component or Document folder in the left list and select the desired document template from the right template list in the right preview area. Refer to the Description and Filename below the preview area for the detailed document information.
  3. Click OK.

If you select the Frameset folder in the Resource Manager, you can choose a commonly used frameset among various frameset templates.


Character Format dialog box - Character tab

[Format > Font - Character tab], {Font Properties... - Character tab}, <Ctrl + L>,

General

Style

Preview

General

  • Primary font
    Specifies the font for the selected text.
  • Alternate font
    Specifies an alternative font for the selected text. If the site visitor's system does not support the Primary font, the Alternate font is used. If neither font is supported, the default font specified in the visitor's browser settings will be used.
  • Size
    Specifies the size of the selected text. The default value, Normal, is 3 (12 pt).
  • Font color
    Specifies the color of the selected text. Default is black.
  • Background color
    Specifies the background color of the selected text. Default is white.

Style

  • Bold
    Increases the thickness of characters. Press the shortcut key <Ctrl +B> to bold selected text directly in the Edit window.

    Example: Namo WebEditor
  • Italic
    Makes characters slant to the right. Press the shortcut key <Ctrl +I> to italicize text directly in the Edit window.

    Example: Namo WebEditor
  • Underline
    Draws a line under the selected text. Press the shortcut key <Ctrl +U> to underline text directly in the Edit window. Example: Namo WebEditor
  • Strikethrough
    Draws a line through the selected text.

    Example: Namo WebEditor
  • Monospaced
    Applies a fixed-width font to the selected text.

    Example: Namo WebEditor
  • Superscript
    Raises the baseline of the selected text slightly and reduces their size.

    Example: Namo WebEditor
  • Subscript
    Lowers the baseline of the selected text slightly and reduces their size.

    Example: Namo WebEditor

Preview

Shows sample text with the chosen attributes applied.

top


Character Format dialog box - Extended Styles tab

[Format > Font - Extended Styles tab], {Font Properties... - Extended Styles tab}, <Ctrl + L>,

Styles

Spacing

Preview

Styles

  • Citation
    Used for quoted text.

    Example: Namo WebEditor
  • Blinking (Netscape only)
    Makes text blink at regular intervals. Not supported by Internet Explorer.

    Example: Namo WebEditor
  • Strong
    Used for emphasis.

    Example: Namo WebEditor (similar to Bold)
  • Code
    Used for program code listings.

    Example: Namo WebEditor
  • Definition
    Used for definitions.

    Example: Namo WebEditor (similar to Italic)
  • Emphasis
    Used for emphasis.

    Example: Namo WebEditor (similar to Italic)
  • Keyboard
    Used to indicate keystrokes.

    Example: Namo WebEditor
  • Sample
    Used for samples.

    Example: Namo WebEditor
  • Variable
    Used for variables.

    Example: Namo WebEditor

The extended attributes listed above may be used to differentiate certain kinds of text from ordinary text. Note that the exact appearance of these attributes depends on the browser being used and some attributes may have no effect in certain browsers.

Spacing

  • Letter spacing
    Specifies the amount of space between letters. You must select a unit, such as points, millimeters, or pixels from the drop-down list.
  • Word spacing
    Specifies the amount of space between words. You must select a unit, such as points, millimeters, or pixels from the drop-down list.

Click the Style... button to open the Style dialog box, where you can specify CSS style attributes for the selected text.

Preview

Shows some sample text with the selected attributes applied.

top


Paragraph Format dialog box - Style and List Options tab

[Format > Paragraph - Style and List Options tab], {Paragraph and List Properties... - Style and List Options tab}, <Ctrl + T>,

  • Style
    Select an HTML style. This is the same as selecting an HTML style from the HTML Style menu from the formatting toolbar.

    Normal

    Namo WebEditor

    Heading1

    Namo WebEditor

    Heading2

    Namo WebEditor

    Heading3

    Namo WebEditor

    Heading4

    Namo WebEditor

    Heading5

    Namo WebEditor

    Heading6

    Namo WebEditor

    Preformatted text

    Namo WebEditor

    Address

    Namo WebEditor

    Defined term

    Namo WebEditor

    Definition

    Namo WebEditor

    Bulleted list
    • Namo WebEditor
    • Namo WebEditor

    Numbered list
    1. Namo WebEditor
    2. Namo WebEditor
  • Bullet type
    If the current paragraph is part of a bulleted list, select a bullet shape. If it is not part of a bulleted list, Bulleted list will be selected in the HTML Style menu.

    Disk

    • 1
    • 2
    • 3

    Square

    • 1
    • 2
    • 3

    Circle

    • 1
    • 2
    • 3
  • Number format
    If the current paragraph is part of a numbered list, select a number format. If it is not part of a numbered list, Numbered list will be selected in the HTML Style menu.

    Number

    1. 1
    2. 2
    3. 3

    Roman

    1. 1
    2. 2
    3. 3

    Alphabet

    1. 1
    2. 2
    3. 3
  • Start numbering at
    If the paragraph is part of a numbered list, specify the number of the first item on the list.

Bullet type, Number format, and Start numbering at apply to the entire list containing the paragraphs. To change the bullet shape or number format for just one item in a list, right-click the item in the Edit window and select {List Item Properties...} in the shortcut menu.

top


Paragraph Format dialog box - Indentation and Spacing tab

[Format > Paragraph - Indents and Spacing tab], {Paragraph and List Properties... - Indents and Spacing tab}, <Ctrl + T>,

Alignment

Indentation

Spacing

Alignment

Choose an alignment type from the drop-down menu. Default means the alignment is not specified; most browsers use left alignment as the default.

Indentation

  • Left
    Specifies how much the paragraph should be indented from the left side. You can select an indentation unit from %, point, mm, cm, pica, inch, pixel, em, ex.
    % | Percentage of the Web browser, relative size unit
point | 1/72 inch, absolute size unit
mm | 1/10 cm, absolute size unit
cm | 10 mm, absolute size unit
pica | 1/6 inch, absolute size unit
inch | 2.54 cm, absolute size unit
pixel | Relative size unit depending on the Window resolution
em | Height of the font, relative size unit
ex | Height of the lowercase alphabet 'x', relative size unit
  • Right
    Specifies how much the paragraph should be indented from the right side. You can use one of the above unites.
  • First line
    Specifies how much the first line of the paragraph should be indented. You can use one of the above unites.

Spacing

  • Presets
    This drop-down menu provides a quick way to apply commonly-used line height values.

    Single (default) - Default line height. The same as leaving line height and before/after paragraph spacing unspecified.

    Single (no paragraph spacing) - The same as specifying 100% line height and zero before/after paragraph spacing.

    1.5 lines - The same as specifying 150% line height and zero before/after paragraph spacing.

    Double - The same as specifying 200% line height and zero before/after paragraph spacing.

  • Line height
    Specifies the line height in pixels, percentage, points, or other unit (select from the drop-down menu). If you do not select a unit, most browsers use percentage by default.
  • Before
    Specifies the amount of space before each paragraph. Select a unit from the drop-down menu. If you do not select a unit, most browsers use pixels as default.
  • After
    Specifies the amount of space after each paragraph. Select a unit from the drop-down menu. If you do not select a unit, most browsers use pixels as default.

Click the Style... button to open the Style dialog box, where you can apply a large variety of CSS attributes to the paragraphs.

top


Bulleted List Item Properties dialog box

[List item shortcut menu > List Item Properties...]

Choose a bullet type

  • Disk
    Select to specify the bullet type as a dot.
  • Square
    Select to specify the bullet type as a filled square.
  • Circle
    Select to specify the bullet type as a circle.


Numbered List Item Properties dialog box

[List item shortcut menu > List Item Properties...]

Choose a numbering format

  • 1, 2, 3, 4...
    Select to specify the numbering format as numbers.
  • a, b, c, d...
    Select to specify the numbering format as lowercase Roman alphabet.
  • A, B, C, D...
    Select to specify the numbering format as uppercase Roman alphabet.
  • i, ii, iii, iv...
    Select to specify the numbering format as lowercase Roman numerals.
  • I, II, III, IV...
    Select to specify the numbering format as uppercase Roman numerals.

Starting number

Specify the starting number to apply to the current cursor position.


What is a Style Sheet?

Cascading Style Sheets (CSS) is a Web standard that complements HTML by providing a way to specify more precise formatting information in Web documents. HTML provides only a few tags and properties that can be used to specify the appearance of documents, such as the <font> tag for specifying the font and relative size of text, and the "align" property for specifying the alignment of paragraphs. Furthermore, the HTML standard leaves the interpretation of these formatting tags and properties up to the browser, so Web documents using these features often appear differently in different browsers.

To help overcome these limitations, the World Wide Web Consortium (W3C) introduced the Cascading Style Sheets Level 1 (CSS1) specification in 1996, followed by the Cascading Style Sheets Level 2 (CSS2) specification a few years later. CSS1 and CSS2 allow for much more precise formatting of Web documents than HTML alone. Some of the benefits of CSS include the ability to specify the exact size of text in a variety of units; to specify alternate fonts when the desired font does not exist on a site visitor's system; to specify exact line and paragraph spacing; to specify borders around paragraphs, and more. CSS uses the <style> tag to specify this formatting information.

Even better, CSS provides a way to create "styles", which are named sets of predefined formatting attributes. Using styles, you can apply an entire set of attributes to a paragraph or a selection of text by just applying a style by name. You can also define a style that is automatically attached to every occurrence of a particular tag, such as the <p> tag for paragraphs or the <li> tag for list items, so that every paragraph or list item in a document automatically uses the style.

Besides providing the convenience of being able to apply an entire set of attributes in one stroke, the real power of styles lies in the fact that you can change the look of every part of a document by just changing the definition of one or more styles.

The collection of styles used in a document is called the "style sheet". The style sheet can reside either inside the HTML document, or in a separate text file with the .css file extension, which can be referenced by other documents. The latter option is particularly powerful, because you can change the look of many documents (for instance, an entire Web site) by just changing the style sheet.

For more information about Cascading Style Sheets, visit the W3C's CSS index page.

Example:

Modifying letter spacing using Style
<No style applied> | NAMO INTERACTIVE
<After style applied> | NAMO INTERACTIVE

Using style sheets offers you the following advantages:

  • You can express different layouts which are not supported by HTML documents.
    You can control the subtle layout differences using absolute or relative length measures (pixel, cm, mm, inch, pica, etc).
  • You can minimize the interference of the user system and let your Web document appear as intended.
    HTML documents appear differently according to the user's platform and the various existing browsers. However, CSS-supported documents appear the way you intend them to appear.
  • You can modify several Web documents with ease using external style sheet files.
    Saving external CSS files lets you manage the logical structure (HTML) and the layout (CSS) of a Web document.

top


Using Style Sheets

Style sheets refers to a list of styles. There are three ways to apply style sheets to your Web documents.

Applying in-line styles to some parts of the document

You can apply in-line styles by inserting style attributes in the <P> tag of the HTML code directly, as follows. This example implements a blue dotted border around the text, and is created by applying a style to the paragraph.

<P style="color:blue; margin:1; border-width:1; border-color:blue; border-style:dotted;">Using Styles</P>

The paragraph, which has been specified as the above, is displayed below in the Web browser.

Using Styles

Embedding a style sheet between the <HEAD> and </HEAD> tags using the <STYLE> element

To apply a certain style to the entire document, define your style using the <STYLE> tag between the <HEAD> and </HEAD> tags. The defined styles are applied to the contents of the <BODY>. '.yellow' has been defined as Class, and '#black' as ID in the below example. The styles defined as Class can be applied repeatedly to different parts of a document.

<STYLE>
P { color:blue; }
H1 { color: red; }
H2 { color: green; }
.yellow
{ color:yellow; }
#black { color:black; }
</STYLE>

Linking an external style sheet to HTML documents

You can save styles, which are defined with <STYLE> tag, in an external style sheet. In this case the style sheet file has the extension '.css' standing for cascading style sheet. For style attributes to be applied to Web documents, they must be linked to the CSS files. When the above style attributes are saved as 'mystyle.css', the content of the style sheet file 'mystyle.css' follows as below.

P { color:blue; }
H1 { color: red; }
H2 { color: green; }
.yellow { color:yellow; }
#black { color:black; }

top


Working with Styles in Namo WebEditor

How does Namo WebEditor support Cascading Style Sheets?

Namo WebEditor fully supports Cascading Style Sheets. CSS formatting attributes can be applied to paragraphs using the [Format > Paragraph Style...] menu command. The [Format > Style Sheet...] menu command lets you define named styles and create a link to an external style sheet. Once you define a named style, you can easily apply it to any paragraph or selection of text using the CSS Style menu on the Formatting Toolbar. In addition, you can apply styles to many page elements that are not paragraphs or text selections, such as tables, images, and form fields, by using the Style button in each element's properties dialog box.

Working with styles in Namo WebEditor

Namo WebEditor classifies styles into Paragraph Style and Internal Style based on the scope of style application. Paragraph Style refers to the style specified in the <P> tag as an in-line style. Internal Style, on the other hand, is defined by inserting the <STYLE> tag, along with its details between the <HEAD> and </HEAD> tags. You can work with both of the styles in the WYSIWYG environment using the relevant dialog box. It is also possible to save the Internal Styles as an external style sheet file.

A Paragraph Style has one paragraph as its minimum scope of application. You can apply a Paragraph style by selecting the [Format > Paragraph Style...] menu command and specifying the relevant values in the Style dialog box. A Paragraph Style is applied by default to the paragraph where the cursor is currently located. However, you can apply a Paragraph Style to multiple paragraphs by selecting, in advance, the paragraphs to which the styles should be applied.

An Internal Style refers to the style applied to the whole document. You can apply an Internal Style by selecting the [Format > Style Sheet...] menu command and specifying the relevant values in the Style Sheets dialog box. You can define a set of style attributes for a tag or define the style as Class or ID. If you define it as Class, you can apply it repeatedly to selected areas of your document. The style definition in Internal Style is inserted as the <STYLE> tag, and its details between the <HEAD> and </HEAD> tags. To save the styles as an external style sheet file, choose the [Format > Style Sheet...] menu command and click Save As External File... .

  • If a set of style attributes are defined for an HTML tag, the elements within the tag are displayed as defined by the style.
  • If you define Class, you can apply it repeatedly to selected areas of the document.
  • Saving an external style sheet file (*.css) lets you link one style sheet to multiple HTML files.

Namo WebEditor supports an in-line style using the <SPAN> tag. To apply the style using the <SPAN> tag, first define the Class, then select the relevant part of your paragraph and apply the intended style using the CSS Style drop-down menu on the Formatting Toolbar.

Style attributes applied using the Style dialog box are overridden by attributes you apply to paragraphs or individual characters and words using the control on the Formatting Toolbar, the Character Format dialog box, and the Paragraph Format dialog box.

top


Specifying class styles

You can apply class to the selected paragraph(s). Class refers to an individual style you have defined. You can create a class using the [Format > Style Sheet...] menu command and specifying relevant values in the Style dialog box. You can define a class and apply it to different parts of a document whenever you want to.

  1. Place the cursor at the paragraph whose class styles should be modified.
  2. Select the [Format > Paragraph Style...] menu command.
  3. Select 'mystyle' in the Class tab of the Style dialog box or from the CSS Style drop-down list on the Formatting Toolbar. (You should first select the [Format > Style Sheets...] menu command and create a class named 'mystyle' with the following attributes: 'Arial', 14 point, and Strikethrough decoration.)
  4. Select the style to be applied in Class.
  5. Click OK.

Example

  1. Place the cursor at the paragraph whose class styles should be modified.

  2. Select the [Format > Paragraph Style...] menu command.
  3. Select the class '.mystyle' in the Class tab of the Style dialog box or from the CSS Style drop-down list on the Formatting Toolbar.
  4. Click OK.

    5. You can decorate your paragraph in more various ways.

    You can decorate your paragraph in more various ways.

    top


Specifying font styles

You can specify the font styles of a selected paragraph. You can modify various font properties, such as font type, font size, decoration, and font style.

  1. Place the cursor at the paragraph whose font styles should be modified.
  2. Select the [Format > Paragraph Style...] menu command.
  3. Click the Font tab in the Style dialog box.
  4. Specify the Primary font and Alternate font. If you want to specify additional fonts for later use, enter the fonts you want in the Font text box.
  5. Specify the Size, Decoration, Style and Weight of the font.
  6. Click OK.

Example

  1. Place the cursor at the paragraph whose font styles should be modified.

  2. Select the [Format > Paragraph Style...] menu command.
  3. Click the Font tab in the Style dialog box.
  4. Set Primary font to Arial.
  5. Set Size to '12 point', Decoration to Underline, Style to 'Italic', and Weight to 'Bold'.
  6. Select OK.

    7. You can decorate your paragraph in more various ways.

    You can decorate your paragraph in more various ways.


Specifying color styles

You can specify the color properties of the selected paragraph(s). You can set foreground/background color and a background image. In applying a background image, you can set the position of the image and specify whether the image is to be applied repeatedly or not.

  1. Place the cursor at the paragraph whose color styles should be modified.
  2. Select the [Format > Paragraph Style...] menu command.
  3. Click the Layout tab in the Style dialog box.
  4. Specify the foreground color and background color of the paragraph. You can choose the colors from the 216 Web safe colors offered in the Foreground and Background drop-down Color Picker Pop-up. Click the Color Picker icon [image] to select the color from the Color Picker dialog box.
  5. If you want to insert a background image, specify the image file path using Browse... to select a file and click Open and OK.
  • Enter the path to the image to be used as a background in the URL text box. You can also specify these by clicking the Browse... button.
  • Specify whether you want the image to be applied repeatedly by selecting the relevant option from the Repeat drop-down menu.
  • Specify the starting grid of the image in the Vert. pos. and Horz. pos. text value boxes.

Example

  1. Place the cursor at the paragraph whose color styles should be modified.

  2. Select the [Format > Paragraph Style...] menu command.
  3. Click the Layout tab in the Style dialog box.
  4. Set the Foreground to 'Blue (#0000FF)' and Background to 'Light sky blue (#0000FF)' using the Color Picker Pop-up drop-down menu.
  5. Click OK.

    6. You can decorate your paragraph in more various ways.
    You can decorate your paragraph in more various ways.

    top


Specifying text styles

  1. Place the cursor at the paragraph whose text styles should be modified.
  2. Select the [Format > Paragraph Style...] menu command.
  3. Click the Text tab in the Style dialog box.
  4. Specify the Alignment, Indent, Line height, and Letter spacing.
  5. Click OK.

Example

  1. Place the cursor at the paragraph whose text styles should be modified.

  2. Select the [Format > Paragraph Style...] menu command.
  3. Click the Text tab in the Style dialog box.
  4. Set Alignment to 'Center', Indent to '5 point', Line height to '10 point', and Letter spacing to '2 point'.
  5. Click OK.

    6. You can decorate your paragraph in more various ways.
    You can decorate your paragraph in more various ways.


Specifying box styles

You can apply rectangular outline to a paragraph. In the Box tab of the Style dialog box, specify the Margins and Padding between the paragraph contents and the box. The specified left margin applies to the rest box borders. You can also specify the border properties to the individual borders.

  1. Place the cursor at the paragraph where the box style should be applied.
  2. Select the [Format > Paragraph Style...] menu command.
  3. Click the Box tab in the Style dialog box.
  4. Specify the Margins and Padding of the paragraph.
  5. Click OK.

If you have not specified either Margins or Padding, the two values will be the same. If you have specified the values, Padding will be applied to the inside of the borderline, and Margins to the outside. Refer to Specifying border styles for detailed information.

Example

  1. Place the cursor at the paragraph where the box style should be applied.

  2. Select [Format > Paragraph Style...] from the menu.
  3. Click the Box tab in the Style dialog box.
  4. Set the Padding to '10 point' and click OK.


Specifying border styles

You can specify border properties to the selected paragraph(s). Border properties are made up of border style, color, and width. Like box style, the specified left border properties will be applied to the rest borders. You can also apply different properties to each border.

  1. Place the cursor at the paragraph to which the border style should be applied.
  2. Select the [Format > Paragraph Style...] menu command.
  3. Click the Borders tab in the Style dialog box.
  4. Specify the Style, Colors, and Width and click OK.

If you specify the Style, Color, and Width of the left border, the other three sides or borders will automatically have the same attributes. You can also specify the attributes of each side separately.

Example

  1. Place the cursor at the paragraph to which the border style should be applied.

  2. Select the [Format > Paragraph Style...] menu command.
  3. Click the Borders tab in the Style dialog box.
  4. Set Style to 'Solid', Colors to 'Blue' and Width to '1 point'.
  5. Click OK.

    6. You can decorate your paragraph in various ways using the style.
    You can decorate your paragraph in various ways using the style.


Removing all style attributes

You can remove all the style properties from a paragraph.

  1. Place the cursor at the paragraph whose color styles should be removed.
  2. Select the [Format > Paragraph Style...] menu command.
  3. In the Class tab of the Style dialog box, click Remove All Attributes.
  4. Click OK.

Example

  1. Place the cursor at the paragraph whose color styles should be removed.

  2. Select the [Format > Paragraph Style...] menu command.
  3. In the Class tab of the Style dialog box, click Remove All Attributes.
  4. Click OK.

    5. You can decorate your paragraph in more various ways.

    You can decorate your paragraph in more various ways.


Applying style attributes to a document

Styles in Style Sheets are applied to the entire document. You can define a series of styles in the Style Sheets dialog box and apply them to the selected parts using the CSS Style drop-down list on the Formatting Toolbar whenever you want to.

  1. Select the text to which the style attributes should be applied.
  2. Select the desired style from the CSS Style drop-down menu on the Formatting Toolbar. Refer to Defining a set of attributes for a Web document for applying the styles.

Example

  1. Select the text to which the style attributes should be applied.

    You can easily edit your Web documents using Style.

  2. Select 'mystyle' (Veranda, 10 pt, Blue) from the CSS Style drop-down menu on the Formatting Toolbar. The CSS Style Class 'mystyle' has been prepared in Defining a set of attributes for a Web document.

    You can easily edit your Web pages using Style.


Defining internal styles

There are two major ways to define document attributes using style. One is to apply styles to individual HTML tags and the other is to define styles using Class or ID. Applying styles to individual HTML tags makes tags with style specification. Style definition using Class is very convenient because you can apply the specified Class repeatedly to different parts of a document.

Defining a set of attributes for HTML tags

  1. Select the [Format > Style Sheet...] menu command.
  2. In the Style Sheets dialog box, click Add... .
  3. In the Add Style dialog box, select the tag from the Tag drop-down menu. Leave the Name text box as blank and click OK.
  4. In the Style dialog box, specify the desired styles and click OK.
  5. In the Style Sheets dialog box, click OK.

Defining class

  1. Select the [Format > Style Sheet...] menu command.
  2. In the Style Sheets dialog box, click Add... .
  3. Check Class under Style type. Enter the class name under Name and in case you are creating a new style click OK. Note that Class type styles have names beginning with a period(.), though you should not include it when entering the name. Namo WebEditor will automatically include the period.
  4. In the Style dialog box, modify the styles as you wish and click OK.
  5. In the Style Sheets dialog box, click OK.

Once a class has been defined, the style lists are displayed in the CSS Style drop-down menu on the Formatting Toolbar. You can use the style whenever you wish to apply the style in a document. Styles of type ID are identical to those of type Class, except that an ID style can only be applied to one element in a document.

Example

  1. Select the [Format > Style Sheet...] menu command.
  2. In the Style Sheets dialog box, click Add... .
  3. In the Add Style dialog box, check Class under Style type, then enter 'my class' under Name and click OK.
  4. In the Font tab of the Style dialog box, set the font to Arial and the size to '14 point'. In the Layout tab, set the Foreground to 'Blue' and click OK.
  5. In the Style Sheets dialog box, click OK.
  6. Now you can see the style 'mystyle'(Arial, 14 pt, Blue) in the CSS Style drop-down menu on the Formatting Toolbar.

top


Editing internal styles

You can modify internal styles, which has been applied to the entire document.

  1. Select the [Format > Style Sheet...] menu command.
  2. In the Style Sheets dialog box, select the style sheet to be edited in the Internal styles list box and click Edit... .
  3. In the Style dialog box, modify the styles as you wish and click OK.
  4. The modified styles are displayed under Style definition.
  5. Click OK.

Example

  1. Select the [Format > Style Sheet...] menu command.
  2. In the Style Sheets dialog box, select 'my style' in the Internal Styles list box and click Edit... .
  3. In the Font tab of the Style dialog box, set the font as 'Arial' and font size as '16 point'. In the Layout tab, set the Foreground to 'Green (rgb 0,153,0)'.
  4. Click OK and the modified styles { font-family:Arial; font-size:16 pt; color:rgb(0,153,0); } are displayed under Style definition in the Style Sheets dialog box.
  5. Click OK.


Saving styles as an external style sheet

You can create different styles in the Style Sheet dialog box and save them in an external file. Saving the styles in an external file makes it possible to apply the specified styles to other documents as well.

  1. Select the [Format > Style Sheet...] menu command.
  2. In the Style Sheets dialog box, select the style sheet to be saved in the Internal Styles list box and click Save as external file... .
  3. In the Save Stylesheet File dialog box, select the folder in which you want to save the file and enter the filename in Filename text box. The extension of the style sheet file is *.css.
  4. Click Save.


Linking to an external style sheet

In order to use an external style sheet in a document, you must create a reference to the style sheet file within the document. Linking to an external style sheet is one way of creating a reference. Note that you can link just one style file to a document.

  1. Select the [Format > Style Sheet...] menu command.
  2. In the Style Sheets dialog box, click Browse... under Linked style sheet to locate and select a style sheet file (Style sheet filenames end with .css extension.) You can also type the URL of the style sheet file directly.
  3. Click View Contents [image] to view the contents of the style sheet file you have selected.
  4. Click OK.

To remove the style file, click Remove [image]. This removes only the link between the current document and the style sheet file, not the style sheet file itself.

When you publish a document containing a reference to an external style sheet, you must publish the style sheet file along with the document, making sure that the relative path from the document to the style sheet file is same on the Web site as on you own hard drive. However, if the style sheet reference is the URL of a style sheet file located on another Web site, it is not necessary to publish the style sheet file to your site.


Importing an external style sheet

In order to use an external style sheet in a document, you must create a reference to the style sheet file within the document. Importing an external style sheet in one way of creating a reference.

  1. Select the [Format > Style Sheet...] menu command.
  2. In the Style Sheets dialog box, Click Add external file... to locate and select a style sheet file on your hard drive. (Style sheet filenames end with .css extension.) The name of the style sheet file you select will appear in the list box. Repeat for each style sheet you wish to import.
  3. Click OK.

It is only possible to link to one external style sheet. However, styles in imported style sheets are available to the document as though they were defined within the document itself. There is no limit to the number of style sheets you can import.

If you import more than one external style sheet into a document, make sure that the style sheets contain no styles that share the same name or that are associated with the same tag. If conflicts occur, it may not be possible to predict which of the conflicting style definitions will be used.

When you publish a document containing a reference to an external style sheet, you must publish the style sheet file along with the document, making sure that the relative path from the document to the style sheet file is same on you Web site as on you own hard drive. However, if the style sheet reference is the URL of a style sheet file located on another Web site, it is not necessary to publish the style sheet file to your site.


Removing the underline from hyperlinks

On default, the hyperlinked text appears with underline. You can remove underline from hyperlinks by specifying the properties of <a> tag, which represents hyperlinks in the HTML source.

  1. Select the [Format > Style Sheet...] menu command.
  2. In the Style Sheets dialog box, click Add... .
  3. Select 'a' from the Tag drop-down menu in the Add Style dialog box and click OK.
  4. In the Font tab of the Style dialog box, select None under Decoration and click OK.
  5. In the Style Sheets dialog box, click OK.

Example

  1. Select the [Format > Style Sheet...] menu command.
  2. In the Style Sheets dialog box, click Add... .
  3. Select 'a' from the Tag drop-down menu in the Add Style dialog box. 'a' is a HTML tag for hyperlink. You can define styles with the existing tags by adding style attributes to them.
  4. In the Style dialog box, select None under Decoration and click OK. None is used to apply no underline or strikethrough to your hyperlinks.
  5. 'a' is added to the style list under Style definition in the Style Sheets dialog box. There will be no underline for the hyperlinked text in the Edit window as specified.

If you define a tag style for the <a> tag (for generic links), any attributes that are defined in it but that are not in link styles will be applied to all links. For instance, if you define a style for the <a> tag that specifies a font, and your link styles do not specify any font, all links (regardless of state) will use the font specified in the <a> tag style.

top


Adjusting the line height

You can adjust the line height, created when you press <Enter>, or <Shift + Enter> in the Edit window, using the [Format > Paragraph Style...] menu command. You can also do the same task in the Paragraph Format dialog box, which is opened when you select the [Format > Paragraph...] menu command. Selecting 'Single (default)' from the Presets drop-down list lets the line height to be determined by the values specified in the Text tab of the Style dialog box.

  1. Place the cursor at the paragraph whose line height should be adjusted.
  2. Select the [Format > Paragraph Style...] menu command.
  3. Click the Text tab in the Style dialog box.
  4. Specify the desired Line height and click OK.

Example

  1. Place the cursor at the paragraph whose line height should be adjusted.

  2. Select the [Format > Paragraph Style...] menu command.
  3. Click the Text tab in the Style dialog box.
  4. Set Line height to '20 point' and click OK.

    5. You can adjust the spacing between lines.

    You can adjust the spacing between lines.

    You can adjust the spacing between lines.

    You can adjust the spacing between lines.


Applying the hover style

'Hover' refers to a state when the mouse cursor is placed over a hyperlink. You can specify the hyperlink style in its 'hover' state. You can match the properties of 'hover' style with the Web page display by specifying the properties of <a> tag, which represents hyperlinks in the HTML source.

  1. Select the [Format > Style Sheet...] menu command.
  2. In the Style Sheets dialog box, click Add... .
  3. Select 'other' from the radio buttons list under Style type, ':hover' from the Name drop-down menu and click OK.
  4. Specify the style in the Style dialog box and click OK.
  5. Click OK in the Style Sheets dialog box.
Example
  1. Select the [Format > Paragraph Style...] menu command.
  2. In the Style Sheets dialog box, click Add... .
  3. Select 'other' from the bulleted list under Style type, ':hover' from the Name drop-down menu and click OK. (Note that ':hover' refers to the state when the mouse pointer is placed over a hyperlink.)
  4. Set the Foreground color for 'fuchsia' in the Layout tab of the Style dialog box and click OK.
  5. In the Style Sheets dialog box { color:fuchsia; } is displayed under Style definition.
  6. Click OK.

    7. top


Adjusting the letter spacing

You can adjust the spacing between letters in a paragraph using Paragraph Style. In case you don't make use of style properties, you should use blank spaces to adjust the letter spacing. But you can easily adjust the spacing using Paragraph Style.

  1. Place the cursor at the paragraph whose letter spacing should be adjusted.
  2. Select the [Format > Paragraph Style...] menu command.
  3. Click the Text tab in the Style dialog box.
  4. Specify the desired Letter spacing and click OK.

Example

  1. Place the cursor at the paragraph whose letter spacing should be adjusted.

  2. Select the [Format > Paragraph Style...] menu command.
  3. Click the Text tab in the Style dialog box.
  4. Set Letter Spacing to '2 points'.
  5. Click OK.

    6. You can adjust character spacing.

    You can adjust character spacing.


Suppressing repetition of the background image

You can decide whether to repeat the background image applied to the paragraph. Selecting 'Repeat' make a image appear tiled. You can also make an image repeat just horizontally or vertically. If you want to show the background image just once, select 'Don't repeat'.

  1. Select the [Format > Paragraph Style...] menu command.
  2. Click the Layout tab in the Style dialog box.
  3. Enter the path or URL of the background image file in the URL text box under Background image.
  4. Select 'Don't repeat' from the Repeat drop-down menu.
  5. Specify the vertical and horizontal position of the image in the Vert. pos. and Horz. pos. text boxes. Click OK.

Example

  1. Place the cursor at the paragraph whose background image should be applied.

  2. Select the [Format > Paragraph Style...] menu command.
  3. Click the Layout tab in the Style dialog box.
  4. Enter the path of the background image in the URL text box under Background image.
  5. Select 'Don't repeat' from the Repeat drop-down menu.
  6. Set Vert pos. and Horizontal Pos. to '4%' and click OK.

top


Style Sheets dialog box

[Format > Style Sheet...], <Ctrl + F6>, Style Sheet

Linked style sheet

Imported style sheet

Internal styles

Style definition

Linked style sheet

Enter the URL or path to an external style sheet (.css file) that you will link the document to. Styles in a linked style sheet are available to the document as though they were defined within the document itself. Only one linked style sheet cab be designated.
  • View Contents
    Clicking this icon opens the specified, linked style sheet in Notepad.
  • Browse...
    Clicking this icon locates or specifies an style sheet file (*.css) existing on your drive.
  • Remove
    Clicking this icon removes the link to the external style sheet. Note that the style sheet file itself is not deleted.

Imported style sheet

Lists external style sheets that have been imported into the current document. As with linked style sheets, the styles in imported style sheets are available to the document as though they were defined within the document itself. There is no limit to the number of style sheets you can import.
  • View Contents
    Opens the selected style sheet (*.css file) in Notepad.
  • Add External File...
    Locates and imports a style sheet (.css file) into the current document. You can select one from your drive or you may enter a URL.
  • Remove
    Removes the reference to the selected style sheet from the document. Note that the style sheet file itself is not deleted.
  • Down
    Moves the selected style sheet one step down in the list.
  • Up
    Moves the selected style sheet one step up in the list.

Internal styles

Lists the styles that are defined in the document's internal style sheet.
  • Add...
    Click to add a new style. Opens the Add Style dialog box.
  • Remove
    Deletes the selected style from the document's style sheet.
  • Edit...
    Opens the Style dialog box, where you can edit the properties of the selected style.
  • Save As External File...
    Saves the document's internal style sheet as an External style sheet (.css file), thereby making it available for use in other documents.

Style definition

Shows the CSS definition for a style selected from the Internal styles list.

top


Style dialogue box - Class tab

Style dialog box - Class tab

[Format > Paragraph Style... - Class tab], <Shift + F6> Paragraph Style - Class tab

Class

If the document's style sheet contains any classes, they will be listed below the class text box. Select a class from the list to apply that class to the current paragraph. The name of the class will appear in the class text box. You can create a class in the Style Sheet... dialog box, opened when you select the [Format > Style Sheet...] menu command.

ID

If the document's style sheet contains any ID-type styles, enter the name of an ID in the ID text box to apply the style to the current paragraph. If you enter the name of a nonexisting ID, it will be ignored.

Styles of ID type may be applied to only one element in a document.

If there is conflict between the attributes of the class or ID specified here and the attributes specified in the other tabs of the Styles dialog box for the current paragraph, the paragraph-specific attributes take precedence.

You should start an ID name with a lowercap alphabet letter. You can use underline(_) in the ID name.

Two identical ID names cannot be used in a document.

Remove All Attributes

Removes all style attributes from the current paragraph, including any applied class or ID.

Earlier versions of Web browsers, such as Internet Explorer 3.x and Netscape Navigator 3.x or lower, do not support CSS styles. These attributes are ignored by such browsers. Though most newer browsers do support CSS styles, please be aware that the various browsers may render these attributes differently.

top


Style dialog box- Font tab

[Format > Paragraph Style... - Font tab ], <Shift + F6>, Paragraph Style - Font tab

Font names

Size

Decoration

Style

Weight

Font names

  • Primary font
    Specifies the primary font for the paragraph. Note that the specified font can only be used if it exists on the computer used to view the document.
  • Alternate font
    Specifies an alternative font for the paragraph. This is not actually a font, but a font type, such as serif or sans serif. If the Primary font does not exist on the visitor's computer, the font specified as the selected font type in the visitor's browser will be used.
  • Font
    Additional alternative fonts may be included in this text box. There is no limit to the number of alternative fonts you can specify. Note that you must use commas to separate font names.

Size

Specifies the text size for the paragraph. There are four ways to specify the text size: proportionally, qualitatively, relatively, and by length. The method may be selected in the drop-down menu next to the Size text box.
  • Length - Specifies the text size using units of length, such as points or millimeters. The available units are: points, mm, cm, picas, inches, pixels, em, and ex.
  • Proportional size - Specifies the text size as a percentage of the "normal" text size, specified in the viewer's browser. To use proportional sizing, select % from the drop-down menu.
  • Qualitative size - Specifies the text size in qualitative terms such as "small" or "large". The actual size corresponding to these terms depends on their definition in a particular browser. There are seven available qualitative sizes: XX-Small, X-Small, Small, Medium, Large, X-Large, and XX-Large.
  • Relative size - Specifies the text size relative to the "normal" size, specified by a browser. There are two relative sizes: Smaller and Larger.

Decoration

Specifies features for the paragraph's text, such as Underline, Upperline, Strikethrough, or Blinking. Select None to remove the decoration.

Style

Specifies the slant of the paragraph's text. The options are Normal, Italic, Oblique.

Although there is a theoretical difference between Italic and Oblique, they appear the same.

Weight

Specifies the weight of the text in absolute (e.g., "bold", "500") or relative (e.g., "bolder") terms.

On the numerical scale 100 - 900, Normal is 400, and Bold is 700. Bolder and Lighter are relative to the "normal" text weight defined by a browser.

top


Style dialog box - Layout tab

[Format > Paragraph Style... - Layout tab], <Shift + F6> [image] - Layout tab

Colors

  • Foreground
    Specify the text color for the entire paragraph.
  • Background
    Specify the background color for the entire paragraph.

To set the text color for only a selected part of a paragraph, click Font Color [image] on the Formatting Toolbar.

To set the background color for only a selected part of a paragraph, click Text Background Color [image] on the Formatting Toolbar.

Background image

Sets a background image for the paragraph. The background image of a paragraph overrides the background image of the document, if any.
  • URL
    Enter the URL or local file path to an image file in the URL text box.
  • Browse... button
    click Browse... to locate an image file on the local drive.
  • Attachment
    (This attribute is not used in the context of paragraph background images.)
  • Repeat
    Specifies whether and how to repeat the background image, if it is smaller than the paragraph as seen in a browser. You can select from the following:

    Repeat - Repeats the image both horizontally and vertically
    Repeat horizontally - Repeats the image only horizontally.
    Repeat vertically - Repeats the image only vertically.
    Don't Repeat - The image is not repeated.

  • Vert. Pos(Position)
    Specifies the vertical offset of the image from the top edge of the paragraph.
  • Horz. Pos(Position)
    Specifies the horizontal offset of the image from the left edge of the paragraph.

top


Style dialog box - Text tab

[Format > Paragraph Style... - Text tab], <Shift+F6>, Paragraph Style - Text tab

  • Alignment
    You can choose the type of alignment from the drop-down list, such as Left, Right, Center, Justify.
  • Indent
    You can set the indentation of the first line of paragraph. %, point, mm, cm, pica, inch, pixel, em, or ex can be used as measures.

    The [Format > Increase/Decrease Indent] menu command is performed with fixed indentation values. On the other hand, you can enter the value as you wish here.
  • Line height
    You can specify the height between lines in a paragraph. %, point, mm, cm, pica, inch, pixel, em, and ex can be used as measures.
  • Letter spacing
    You can set the spacing between letters in a paragraph. %, point, mm, cm, pica, inch, pixel, em, and ex can be used as measures.

Internet Explorer 3.x and Netscape 3.x and below cannot properly interpret the values specified here. Internet Explorer and Netscape 4.x and above can interpret the values somewhat differently.


Style dialog box - Borders tab

[Format > Paragraph Style... - Borders tab], <Shift + F6>, Paragraph Style - Borders tab

Style

Colors

Width

Style

Specify the styles of the borders at the left, right, top, and bottom of the paragraph independently. The various styles are described below.
  • None: No border.
  • Dotted: A dotted line. This style correctly appears only on a Macintosh with Internet Explorer 4.01 or higher. In Windows browsers, it is rendered as a solid border.
  • Dashed: A dashed line. This style correctly appears only on a Macintosh with Internet Explorer 4.01 or higher. In Windows browsers, it is rendered as a solid border.
  • Solid: A solid line.
  • Double: A double solid line. The page's background color or image is visible between the two lines.
  • Groove: A beveled effect, like a picture frame lit from one corner. Uses two colors: gray and white.
  • Ridge: Similar to Groove, except uses gray and black as the highlight colors.
  • Inset: A beveled effect that makes the paragraph appear sunken, below the rest of the page.
  • Outset: A beveled effect that makes the paragraph appear raised, above the rest of the page.

The border styles Groove, Ridge, Inset, and Outset do not appear correctly in the Edit window. To view these border styles, please use the Preview tab or preview the document in a browser by selecting the [View with Internet Explorer/Netscape] menu command.

Colors

Specify the color of each border independently.

Width

Specify the width of each border independently.

When you set a style, color, or width for the left border, the same attribute is automatically set to the same value as a convenience to make it easier for the other three borders . Therefore, if you want to set each border's attributes independently, set the attributes of the left border first, then set those of the other borders.

The Width units 'thin', 'medium', 'thick' are not the actual unit sizes; they are only width types to choose from conveniently.

top


Style dialog box - Box tab

[Format > Paragraph Style... - Box tab], <Shift + F6>, Paragraph Style - Box tab

Margins

Specify the left, right, top, and bottom margins separately. You must specify a unit for each margin, otherwise 'pixels' will be used as the default.

Padding

Specify the padding for each side separately. If you do not specify a unit for the padding, 'pixels' will be used.

When you set a margin or padding value for the left side of a paragraph, the same value is automatically set for the other three sides as a convenience. Therefore, if you want to set each side's margin or padding independently, set the value for the left side first, then set the values for the other sides.

Outdated Web browsers, such as Internet Explorer 3.x and Netscape Navigator 3.x or lower, do not support paragraph margins and padding. These attributes are ignored by such browsers. Most newer browsers do support these attributes, but be aware that the various browsers may render these attributes differently.


Add Style dialogue box

Add Style dialog box

[Format > Style Sheet... - Add... button], [image] - Add...

Tag

Style type

Created style

Copy style

Tag

To define the style for a certain HTML tag, select the HTML tag in this menu. However, do not enter a name in the Name text box. If you are creating a new style, leave this as the default setting (none).

Style type

Select the type of style you want to add, then enter a name for the style in the Name text box. Do not enter a name if you are defining the style for an HTML tag.
  • Class
    In most cases, you should choose Class as the style type. Class styles have names beginning with a period. (However, don't type a period when entering the name. Namo WebEditor will add one automatically.) Only Class styles appear in the CSS Style menu on the Formatting Toolbar.
  • ID
    Styles of ID type are identical to those of Class type, except that an ID style can only be applied to a single element in a document. ID styles have names beginning with a # character. (However, don't type the # character when entering the name. Namo WebEditor will add it automatically.) ID styles do not appear in the CSS Style menu on the Formatting Toolbar.
  • Other
    The Other style type is used to define styles for the various states of a hyperlink. In current browsers, hyperlinks can have four distinct states: link, visited, active, and hover. "Active" links are usually represented with a dotted border around the link; an active link will be followed if the visitor presses the <Enter> key. "Hover" is the state of a link when the mouse pointer is directly over it in a browser. Each link state can have a different appearance or style. To define the style for a link state, select Other as the style type and select the link state ("link" is for unvisited links) from the Name menu.

The style name must begin with a letter, and may only contain letters, numbers, and underscores (_). Do not use spaces, punctuation, or special characters in the name.

Created style

This shows the name of the style as it will appear in the style sheet.

Copy style

When defining a new style that is similar to an existing one, you can save time by copying the attributes of the existing style. Later, you will need to change only the attributes in the new style that you want to be different from the original style. To copy the attributes of an existing style, choose the existing style from the Copy attributes of drop-down menu.

OK button

Once you've specified a style type, entered a name for the new style, and selected a style to copy (if any), click OK to close the Add Style dialog box. The Style dialog box will open, where you can define the new style.

Cancel button

Click Cancel if you do not want to add a style.

top


Color Picker dialog box

[Color menu - Color Picker icon [image]]

Selecting a color

Previewing the selected color

Selecting a color using Dropper

Selecting a color

Any time you use a color menu in Namo WebEditor, you can select Custom from the menu to open the Color Picker dialog box. The Color Picker dialog box provides several ways to select a color:
  • 216 Basic colors(browser-safe color)
    The grid at the lower right area of the dialog box shows 216 standard, Web-safe colors. Click one of the squares on the grid to select a browser-safe color.
  • HTML
    Shows the hexadecimal value of the color you have selected.
  • Name
    Shows the name of the color in case you have selected basic colors, such as white or black.
  • Red, Green, Blue
    Shows the RGB values of the selected color. You can specify a color by entering relevant values in these boxes.
  • Hue, Saturation, Brightness
    Shows the HSV values of the selected color. You can specify a color by entering relevant values in these boxes.

Color Preview

The selected color is shown in New under Color preview directly below the color that is currently applied to the item. This allows for convenient comparison of old and new colors.
  • Current
    Shows the color at the current cursor location.
  • New
    Shows the selected color from the Color Picker dialog box.

Selecting a color using the Dropper
By clicking on the dropper icon, you can "pick up" a color from anywhere in Namo WebEditor's Edit window. Click on any location -- such as on an open document -- to select the color at that point.

top


Hyperlinks and Web Documents

What are hyperlinks?

Hyperlinks, also simply referred to as "links," are perhaps the biggest reason for the phenomenal success and exponential growth of the World Wide Web in recent years. A hyperlink is a page element (usually a word, button, or image) that "points to" another Web page. When the visitor viewing the hyperlink in a Web browser clicks the link, the browser goes to the specified Web page, which may be within the same Web site, or in any other Web site in the world. The power of hyperlinks lies in their ability to connect the millions of existing Web pages in the world to one another and to the millions of people who use the Web. Indeed, it may be said that hyperlinks are the whole point of the Web.

Hyperlinks can also point to things other than Web pages. A link can point to an image, an office document, a downloadable file, an FTP site, or an e-mail address, among other things. When you create a hyperlink on the text, the hyperlinked text will be underlined and the mouse-pointer will change into a hand when it is guided over the text.

Generally, you can create a single hyperlink on an image. However, by creating an image map, different regions of an image may each act as separate hyperlinks to different documents. Refer to Creating an Image map.

Navigation Bar

A Navigation Bar is a set of buttons or text links in a document that is used to jump to other documents within the same Web site. A navigation bar guides visitors and lets them surf the site easily and effectively. Namo WebEditor creates navigation bars automatically when you create a site using the Site Wizard.

top


Absolute vs. Relative Hyperlinks

There are two basic forms of hyperlinks that are used in Web documents: Absolute and Relative. These terms refer to how a link refers to a document, not the type of document the link refers to.

URL

A Uniform Resource Locator (URL) is an address that uniquely identifies a particular document on the Internet. For Web documents, the format of a URL is:

    http://domain[/directory1][/directory2][/...][/document.ext]

(Items in brackets are optional.) For instance, in http://www.namo.com/products/we4/index.html, "www.namo.com" is the domain, "products" is a directory, "we4" is a subdirectory, and "index.html" is the document filename. Often, the document filename is left out of the URL. In these cases, the URL points to the default document in the specified domain or directory, which is usually named "index.htm" or "index.html". URLs are typically used to link to documents that are on other Web sites.

Absolute link

An absolute link refers to a document using a Uniform Resource Locator (URL), the standard way of referencing any document on the Internet. An example of an absolute link is "http://www.namo.com/index.html." A URL, also known as an Internet address, is like a calling card that uniquely identifies a particular document on the Internet. There is a one-to-one relationship between URLs and Internet documents: every document on the Internet has its own URL, and every URL refers to a single document on the Internet.

Relative link

A relative link refers to a document by a kind of shorthand, based on the location of the target document in relation to the one containing the link. An example of a relative link is "product/index.html." This link tells a browser to open a document named "index.html" located in a "products" folder, which is within the folder containing the current document. Relative links can only refer to documents that are within the same Web site as the document containing the link, since they do not provide the Web site's domain name.

Example of Absolute hyperlinks

Link Type | Examples
Web | http://www.namo.com/products/index.html A typical Web link.
 | http://www.namo.com Links to the default document at the top level of the site.
 | http://www.namo.com/download/webeditor/install.exe links to a program file that will be downloaded by the browser.
FTP | ftp://ftp.namo.com/webeditor/install.exe Links to a program file that will be downloaded by FTP.
E-mail | mailto:info@namo.com Opens a new e-mail addressed to the recipient in the link.

Example of Relative hyperlinks

Link | Location of referenced document
index.html | The same folder as the document containing the link.
../index.html | The folder one level above the folder containing the document containing the link.
../../index.html | The folder two levels above the folder containing the document containing the link.
products/index.html | A subfolder of the folder containing the document containing the link.
products/webeditor/index.html | A subfolder of a subfolder of the folder containing the document containing the link.
/index.html | The top level of the site.

top


Hyperlinks and Bookmarks

When a document connected with a hyperlink is opened, the top portion of the linked page appears in a Web browser. There are times where you need to set the hyperlink so that a specific portion of the document will open in the browser window. A bookmark is used for such cases.

A bookmark is an invisible marker that can be placed anywhere in a Web document and that can be referenced by a hyperlink. When a site visitor clicks a link that contains a bookmark reference, the Web browser not only loads the document the link points to, but also scrolls to the location of the bookmark. Bookmarks provide a convenient way to let site visitors jump to one or more specific locations in a long document.

(Below is an example of a bookmark used for a document to move to a specific portion of another document.)


Creating hyperlinks with text

You can set hyperlinks to various objects. Text is the most basic object to which a hyperlink can be applied.

  1. Select the text you wish to use as a hyperlink.
  2. Select one of the following methods.
  • Enter the relevant URL and target frame in the Hyperlink text box on the Hyperlink Toolbar.
  • Select the [Insert > Hyperlink...] menu command. In the Create Hyperlink/Hyperlink Properties dialog box, specify the hyperlink attributes such as URL, Target frame, etc, and Click OK.

If you need to specify the target frame, click the Browse Target Frame... in the Create Hyperlink/Hyperlink Properties dialog box.. In the Target frame dialog box select the target frame by clicking on the target frame area and click OK.

To show the Hyperlink Toolbar, select the [View > Toolbars > Hyperlink] menu command.

URLs in the Edit window are automatically changed into hyperlinks. If you want to deactivate the 'auto convert' option, select the [Tools > Preferences...] menu command and uncheck the Automatic link creation text box in the Edit tab.

Example

  1. Select the text you wish to use as a hyperlink.

    Welcome to Namo WebEditor !!!
  2. Enter 'www.namo.com' in the Hyperlink text box and set the Target frame to '_blank' on the Hyperlink Toolbar.

    Welcome to Namo WebEditor !!!


Create hyperlinks on images

Creating hyperlinks on images

You can apply hyperlink to an image as well as text in the Edit window.

  1. Select an image by clicking it.
  2. Select one of the following methods.
  • Enter the relevant URL and target frame in the Hyperlink Toolbar.
  • Select the [Insert > Hyperlink...] menu command. In the Create Hyperlink/Hyperlink Properties dialog box, specify the hyperlink attributes such as URL, Target Frame, etc, and Click OK.

If you need to specify the target frame, click the Default Target Frame... button. In the Target Frame dialog box select the target frame by clicking on the target frame area and click OK.

You can also modify your hyperlinks by double-clicking the image and clicking the Create Hyperlink... button in the Image Properties dialog box.

To display Hyperlink Toolbar, select the [View > Toolbars > Hyperlink] menu command.

Example

  1. Select the image by clicking it.

  2. Enter 'www.namo.com' in the Hyperlink text box and select the Target frame to '_blank' from the Target Frame drop-down menu on the Hyperlink Toolbar.

    (If you click the image, the hyperlinked document is opened. 'http://www.namo.com' has been entered in URL and 'blank' has been specified as Target frame.)

top


Creating hyperlinks to e-mail addresses

You can create a hyperlink to e-mail addresses, which opens a mail client program and displays the linked e-mail address when clicked.

  1. Select the text you wish to use as a hyperlink.
  2. Click Hyperlink [image] on the Standard Toolbar or select the [Insert > Hyperlink...] menu command.
  3. In the Create Hyperlink/Hyperlink Properties dialog box, select 'mailto' from the Scheme drop-down menu and enter the e-mail address in URL.
  4. Click OK.

E-mail addresses you have entered in the Edit window are converted automatically to hyperlinks. If you want to deactivate this 'auto convert' option, select the [Tools > Preferences...] menu command and uncheck Automatic link creation in the Edit tab.

Example

  1. Select the image on which you wish to create a hyperlink to an e-mail address.

    (Example: when 'mailto' is selected from the Scheme drop-down menu and entered 'webmaster@namo.com' in URL: Click this image and a mail client is launched containing the specified e-mail address.)
  2. Click Hyperlink [image] on the Standard Toolbar.
  3. In the Create Hyperlink/Hyperlink Properties dialog box, select 'mailto' from the Scheme drop-down menu and enter 'webmaster@namo.com' in URL.
  4. Click OK.

top


Modifying hyperlink attributes

You can modify properties of hyperlinks you have created, such as URL, Target frame, etc.

  1. Double-click the text or image containing hyperlinks.
  2. In the Hyperlink Properties dialog box, modify hyperlink properties such as Target frame and URL.
  3. Click OK.

Example

  1. Double-click the image containing a hyperlink.
    (If you move the mouse-pointer over the hyperlinked image, the target URL is displayed at the bottom of the Edit window. For example, the image below is hyperlinked to 'main.html'.)

  2. Change the URL from 'main.html' to 'index.html' in the Hyperlink Properties dialog box.
  3. Click OK.

You can modify properties of a hyperlink by selecting a hyperlinked element and using the Hyperlink Toolbar.

If you place your mouse over hyperlinked text or images, its URL appears in the status bar at the bottom of the Edit window.

top


Modifying hyperlink colors

Hyperlink #0000FF (Blue)

Visited Link #800080 (Purple)

Active Link #FF0000 (Red)

Above are the default colors of the hyperlinks in different states. These colors can be easily modified to suit different documents.

  1. Select the [File > Document Properties...] menu command.
  2. Specify the colors of Hyperlink, Visited Link, and Active Link in the Appearance tab in the Document Properties dialog box.
  3. Click OK.

You can specify your own default colors by modifying the colors of different hyperlinks in the Document Defaults tab in the Preferences dialog box.

Example

  1. Select {Document Properties...} in the shortcut menu.
  2. The Document Properties dialog box appears. Click the Appearance tab and set the Hyperlink and Visited Link to 'Green', and Active Link to 'Light Green'.

    3. Hyperlink

    Visited Link

    Active Link

  3. Click OK.

If you want to modify the color of a certain hyperlink in a document, select the hyperlink and modify the color by applying Font Color [image] .

top


Removing underline from hyperlinks

In the default setting, any text containing a hyperlink appears underlined. This may be removed using a CSS Style. Using CSS also allows you to apply rollover effect to hyperlinks.

How to remove underline from a hyperlink

  1. Select the [Format > Style Sheet...] menu command.
  2. Click Add... in the Style Sheet dialog box.
  3. Select 'a' from the Tag drop-down menu in the Add Style dialog box and click OK.
  4. In the Font tab of the Style dialog box, select None under Decoration.
  5. Click OK in the Style Sheet dialog box.

    Hyperlink without underline

If you want to remove underlines from only certain hyperlinks in your document, you should modify the attributes of the hyperlinks using Paragraph Style by selecting the [Format > Paragraph Style...] menu command.

How to apply a rollover effect to hyperlinks

The color of hyperlinks can be formatted to change when the mouse-pointer is held over the links.

  1. Select Other in the Add Style dialog box.
  2. Select ':hover' from the Name drop-down menu and click OK.
  3. Select the Layout tab in the Style dialog box.
  4. Change the Foreground color using the Color Picker Pop-up and click OK.


Opening the hyperlinks

The target document of a hyperlink can be opened in the Edit window without switching to the Preview tab.

  1. Select the hyperlinked text or image.
  2. Select {Open Hyperlink} in the shortcut menu.
  3. The hyperlinked document will open in the Edit window.

You can also open the hyperlinked document in the Edit window by clicking the link while pressing the <Alt> key.

If the link points to a file on the Web and you are connected to the Internet, Namo WebEditor will connect to the Web site hosting the file and download it.

Example:

  1. Place the mouse-pointer over the hyperlink while pressing the <Alt> key.
  2. Click the hyperlink when the mouse-pointer changes into a hand, as in the example below.

  3. The hyperlinked document will immediately open in the Edit window.


Finding and replacing the text in hyperlinks

You can find and replace a specific part in only the URLs of the hyperlinks.

  1. Select the [Edit > Replace...] menu command.
  2. Enter the text you wish to find and replace with in the Find and Replace with fields in the Find/Replace dialog box.
  3. Check Match in hyperlinks only under Options and specify Direction and range.
  4. Click Replace or Replace All to replace the specified item in Find with the item in Replace with.
  5. Click Close.

Example:

  1. Suppose you want to replace 'http://www.namo.co.kr' with 'http://www.namo.com' in the hyperlinks of your Web page. Select the [Edit > Replace] menu command.

  2. In the Find/Replace dialog box. enter 'www.namo.co.kr' in the Find field, and 'www.namo.com' in the Replace with field.
  3. Check Match in hyperlinks only under Options and select Start at top of document under Direction and range.
  4. Click Replace All and the specified task is immediately performed.

  5. Click Close.

Checking Search all open documents under Direction and range allows you to find and replace a specific URL in all the documents that are currently opened in the Edit window.

top


Removing hyperlinks

You can remove hyperlinks which has been applied to text or images.

  1. Place the cursor anywhere on the link (the hyperlinked text). If the hyperlink is on an image, select the image.
  2. Click Remove Hyperlink [image] on the Standard Toolbar or select the [Insert > Remove Hyperlink...] menu command.

You can easily remove the hyperlinks by placing the cursor anywhere in the hyperlinked area and pressing the shortcut key <Shift + F9>.

Example:

  1. Place the cursor anywhere on the link (the hyperlinked text).

  2. Press <Shift + F9>.

    3. Welcome to Namo WebEditor !!!

To remove hyperlinks from multiple texts and/or several images at once, select them all and press <Shift + F9>.


Creating a hyperlink that opens a pop-up window

You can make a hyperlink that opens a pop-up window, where the hyperlinked document is displayed. You can specify the properties of the pop-up window, such as x/y coordinate and size.

  1. Select the hyperlinked text or images.
  2. Click Hyperlink [image] on the Standard Toolbar or select the [Insert > Hyperlink...] menu command.
  3. In the Create Hyperlink/Hyperlink Properties dialog box, click Open New Window... at the bottom of the dialog box.
  4. In the Script Wizard - Pop-up Window dialog box, enter the Window name and URL. Then, specify the position, size, and attributes of the pop-up window and click Finish.
  5. Click OK in the Create Hyperlink/Hyperlink Properties dialog box.

Example:

  1. Select the image you wish to use as a hyperlink.

  2. Click Hyperlink [image] on the Standard Toolbar.
  3. In the Create Hyperlink/Hyperlink Properties dialog box, click Open New Window....
  4. In the Script Wizard - Pop-up Window dialog box, enter 'www.namo.com' in URL. Set Left margin and Top margin to '300' and Width and Height to '200'.
  5. The URL is automatically added to the URL text box of the Create Hyperlink dialog box.
  6. Click OK.

    (When you click the image, a pop-up window of the designated size opens.)

top


Creating bookmarks

Bookmark refers to a mark in a Web page, which lets you jump to a specific position in a Web document. Setting a hyperlink to a bookmark lets you jump not only to a Web document, but also to a specific location where a bookmark has been inserted.

Creating bookmarks

  1. Place the cursor at the location or select the area you intend to insert a bookmark.
  2. Select the [Insert > Bookmark...] menu command or select {Create Bookmark...} in the shortcut menu.
  3. In the Bookmarks dialog box, enter the name of the bookmark in the Bookmark name text box and click Add.
  4. Click Close.

You can create a hyperlink to a bookmark in the same document by clearing the URL text box and selecting a bookmark in the Bookmark drop-down menu. The selected bookmark will appear by itself in the URL text box, preceded by a # sign. When such a link is clicked in a browser, the browser simply scrolls to the location of the bookmark in the same document.

Selecting Show/Hide Special Tag Marks [image] on the Standard Toolbar allows the bookmarked area to appear with a dotted blue underline. If you selected some text before creating the bookmark, that text will appear with a dotted blue underline. Otherwise, a small yellow bookmark symbol ( [image]) will appear at the insertion point. These are only visible in the Edit window, not in a browser or in the Preview window.

Modifying a bookmark

  1. Right-click the bookmarked area and select {Modify Bookmark...} in the shortcut menu.
  2. Enter a new bookmark name in the Bookmark name text box and click Rename.
  3. Click Close.

To remove a bookmark, select the link you wish to remove from the Bookmark list and click Remove.

Example:

  1. Select the area where you want to insert a bookmark.

  2. Select {Create Bookmark...} in the shortcut menu.
  3. The text in the area which you selected to create the bookmark is indicated in the Bookmark name field as a default in the Bookmarks dialog box. You may use the default text or enter an new name for the bookmark.
  4. Click Add, and the bookmarked area in the Edit window will appear with a dotted blue underline.

  5. Click Close.

top


Creating hyperlinks with bookmarks

Creating hyperlinks with bookmarks will allow your site visitors to jump to a specific position of your Web document.

  1. Insert a bookmark in the document. (See Creating Bookmarks for how to create a bookmark.)
  2. Select the text or image you wish to use as a hyperlink.
  3. Select one of the following methods.
  • Select a bookmark from the Bookmark drop-down menu on the Hyperlink Toolbar.
  • Select the [Insert > Hyperlink] menu command and specify Bookmark in the Create Hyperlink dialog box and click OK.

To show the Hyperlink Toolbar, select the [View > Toolbars > Hyperlink] menu command.

You can make the visitors jump to a specific position of the Web document by specifying a Bookmark and a URL in the Create Hyperlink dialog box.

Example

  1. Create the bookmark 'top' at the top of the document.
  2. Select the text you wish to be hyperlinked to the bookmark you have created.
  3. Select a bookmark from the Bookmark drop-down menu on the Hyperlink Toolbar.

To the Top (Click this link to jump to the top of this document.)


Create Hyperlink/Hyperlink Properties dialog

Create Hyperlink/Hyperlink Properties dialog box

[Insert > Hyperlink...], {Create Hyperlink...}, <F9>,

General hyperlink

E-mail hyperlink

Target frame

Tooltip

Access Key

Buttons

General hyperlink

  • Scheme
    Specifies which Internet protocol the hyperlink should use. If not specified, HTTP will be used.
  • URL
    Enter the URL of the target document. This could be either a full Internet address (such as 'http://www.namo.com/index.htm') or a relative address (such as 'hobbies/painting.html'). You can type the URL in manually, or you can:
    • Click Browse... to find and select a file on your computer or on the local network.
    • Click Open Documents... to select a document from the List of Open Documents dialog box.
    • Click Site... to select from among the site's documents in the Select File dialog box. This button is available only when a site is open.
    • Click New Document... to create a hyperlink that links to a new document. Enter the Filename and Title for the new document or click the Browse... button to locate an existing file in the New Document dialog box.
  • Bookmark
    To link to a bookmark in the target document, enter the bookmark here. Do not type the # character; it will be added to the URL automatically. If the target document is on a local drive, any bookmarks in it will be listed in the drop-down menu. Select one from the list. Alternatively, you can type the bookmark directly into the URL in the URL field.
  • Encode Path
    Click Encode Path to replace any special characters in the path with ASCII codes. This allows maximum compatibility with browsers and Web servers. For example, spaces in the path will be replaced with '%20'.
  • Decode Path
    Click Decode Path to replace ASCII codes for special characters with the actual characters.

E-mail hyperlink

Select this when you create a hyperlink to an E-mail address.

  • Address
    Enter the e-mail address to which text or an image is to be linked.
  • Subject
    Enter the phrase to be inserted into the Subject text box of the mail client program, which is to be opened when the specified hyperlink is clicked.

When creating an e-mail hyperlink, select mailto: as the scheme.

Instead of using the Scheme menu, you may specify the scheme by typing it in at the beginning of the URL. For example, 'ftp://ftp.namo.com'.

Target frame

If the current document uses frames, you can specify into which frame the target document of the link should load. If not specified, the target document will load in the entire browser window.

    _blank | The specified document will be loaded in a new window.
_parent | The specified document will be loaded in the parent frame.
_self | The specified document will be loaded in the same frame as the current opened document.
_top | The specified document will be loaded in the entire window including the frame containing the current document.

If you have created a frameset document, click [image] and select the target frame and click OK.

  • Browse Target Frame... button
    Lets you specify the default target frame on a frame miniature. Click the this button and select the target frame by clicking on the target frame area and click OK in the Target Frame dialog box.

In the Target Frame dialog box, clicking on the target frame area, whose frame name has not been specified, will show the message "The selected target frame has no name. Please specify the frame name first." In this case, set the name of each frame in the Frame Properties dialog box first and specify the default target frame later.

Tooltip

Any text entered here will appear as a "tooltip" (a small yellow box containing explanatory text) when a site visitor temporarily holds the mouse-pointer over the link.

Access Key

Select a number from the Access Key drop-down menu. If you specify an Access Key, you can jump to the hyperlink, to which an Access Key has been applied, using keyboards in a circumstance under which you cannot use a mouse. To execute an Access Key, press the specified Access Key while holding down <Alt>. For example, if you have applied Access Key '5' to a hyperlink, the hyperlink gets activated when you press <Alt + 5> in the browser window.

Buttons

  • Clear Link button
    Click this button to remove all information in the dialog box, effectively removing the link.
  • Open New Window... button
    Click this button if you want the target document to open in a new browser window rather than replacing the contents of the existing window. This opens the Script Wizard - Pop-up Window, where settings for the new window can be specified.

top


Bookmarks dialog box

[Insert > Bookmark...], {Create Bookmark...}, <Ctrl + G>,

  • Bookmark name
    The text in the selected area where you wish to create a bookmark is indicated by default. You may use the default text or enter a unique name for the bookmark.
  • Bookmark list
    Shows the list of all bookmarks.
  • Add button
    Adds a bookmark in the Bookmark name text box to the Bookmark list. The newly added bookmark's name will be listed in the Bookmark list.
  • Rename button
    Changes the name of an existing bookmark. Select the original name from the list, then type the new name in the Bookmark name field and click Rename.
  • Remove button
    Removes the selected bookmark from the list.
  • Go to Bookmark button
    Jumps to the selected bookmark position and closes the Bookmark dialog box.
  • Close button
    Closes the Bookmark dialog box.

If you create a bookmark on a word or image, deleting the word or image will also delete the bookmark.

When you add a bookmark and wish to link to another document, you must save the document containing the bookmark first.


List of Open Documents dialogue box

List of Open Documents dialog box

[Insert > Hyperlink - Open Documents...],

Indicates the list of documents currently opened in the Edit window.

  • Filename
    Shows the filenames of the open documents and their location on the local hard drive.
  • Title
    Shows the document titles of the open documents. This title is located between <title> and </title> tag in the document's HTML source.
  • Number of documents
    Shows the number of files that are currently open in the Edit window.

If a filename is too long to be displayed, click and drag the borderline between Filename and Title.


New document dialog box

[Insert > Hyperlink - New Document...],

You can create a hyperlink that links to a new document. Click New Document... in the Hyperlink Properties/Create Hyperlink dialog box.

  • Filename
    Enter the filename or path of a new document. Click Browse... to locate an exiting file and save it with a different name and to create a hyperlink to that document.
  • Title
    Enter the title of a new document to be created.
  • Edit the document after close the hyperlink dialog
    Selecting this option closes the Create Hyperlink dialog box and opens a new document in the Edit window. If this option is not selected, a new document is opened while the Create Hyperlink dialog box is open.


What is a Navigation Bar?

What is a Navigation Bar?

A navigation bar is a set of buttons or text links in a document that is used to jump to other documents in the same site. Namo WebEditor creates navigation bars automatically when you create a Web site using the Site Wizard. The navigation bars that Namo WebEditor creates are dynamic--they change automatically when you make changes to the structure of the site or change the titles of the documents that they link to.

Types of navigation bars

  • Text navigation bar
    Navigation bar made with alphanumeric characters.
  • Smart Button navigation bar
    A Navigation bar made with Smart Buttons.
  • Flash Button navigation bar
    A Navigation bar made with Flash Buttons.
  • Path navigation bar
    A Navigation bar that shows the path from the home page (the index page) to the current page.
  • Navigation Tree
    A tree shaped navigation bar with which you can browse a certain section of the Web site, or the entire Web site. You can view multiple levels of menus at once by collapsing and expanding the nodes.
  • Submenu
    A pop-up menu that appears when you place the mouse-pointer over the navigation bar. The pop-up shows the pages that are located one level lower that the hovered menu.
  • Sublevel
    Displays the sublevel menu along with the main navigation bar.

top


Site Structure and Navigation

Site structure and Navigation

It is important to design the Web site logically to make it an easy-to-browse Web site. Planning and designing the site structure before actually creating one is a key factor in site creation. A well-made navigation helps the visitor understand the Web site better, providing the information the visitor needs faster.

Site Manager and Navigation bar

A navigation bar is created automatically, based on the Web site structure specified in the Site Manager. It is added to every Web document included in the site. Once inserted, the navigation bar is updated automatically whenever the structure is changed, relieving you of all the work of updating and verifying links.

Making the navigation bar

    Create a site

    ->

    Design the site structure

    ->

    Apply a theme

    ->

    Insert a navigation bar


Navigation Bar and Web Documents

Site structure and documents

The site structure is mainly used for making navigation bars. Therefore, the site structure does not necessarily include all the Web documents that exist in the Web site. There are documents that only open in pop-up windows, and they are not likely included in the structure.

Site structure and frameset

If you use frameset documents, they may not appear in the site structure while one of its frame documents does. This happens when you make a navigation bar that is hyperlinked to the frameset document. However, you can change the settings to include the frameset document in the structure.

Documents included in the navigation bar

Most navigation bars have links to the pages that are at the same level. Links to the parent page or to the index page are popular ones that are not linked to the same level pages.

You can insert a navigation bar that is linked to pages that are located at the same level, the level above, or the level below. Or, you can make a navigation bar that shows the next-to-top-level pages, regardless of the level of the current page. This type of navigation bar may be used when you wish to show main menus of the Web site. You can also make a navigation bar that is linked to a specific level, or that moves to previous, next, or parent pages.


Inserting a text navigation bar

After building the structure of the Web site, you can insert navigation bars to the documents. Text navigation bar is the basic form of navigation bars that consists of hyperlink texts.

  1. In the Site tab of the Site Manager and select the document of which you wish to insert a text navigation bar and open it by double-clicking it The selected document is opened in the Edit window.
  2. Select the [Insert > Site Element > Navigation Bar...] menu command.
  3. In the Navigation Bar Properties dialog box, select a Navigation bar type.
  4. Select the Orientation of the navigation bar. To modify the Navigation text, Separator, Line height, etc, click [image] to open the Navigation Bar Text Setting dialog box and specify the relevant values.
  5. Select Use text in Type.
  6. Click OK.

If you select Previous/Next, or Previous/Up/Next, or Previous/Home/Next for the Navigation Bar type, you can change the Navigation Text in the Navigation Bar Text Setting dialog box.


Inserting Smart Buttons and Flash Buttons

Other than text navigation bar, you can create a navigation bar made with buttons. You can select either Smart Buttons or Flash Buttons for the navigation bar.

  1. Open a document in the Site tab of the Site Manager.
  2. Select the [Insert > Site Element > Navigation Bar...] menu command.
  3. Select the Navigation bar type in the Navigation Bar Properties dialog box.
  4. Choose the Orientation. Select from Horizontal or Vertical.
  5. Select Use Smart Button or Use Flash Buttons in the Type.
    • When Use Smart Buttons is selected: Click [image] and select a Smart Button in the Smart Button tab of the Resource Manager.
    • When Use Flash Buttons is selected:Click [image] and select a Flash Button in the Flash Button tab of the Resource Manager.
  6. Click OK.
    • Navigation bar made with smart buttons:

    • Navigation bar made with flash buttons:

After modifying the appearance of a navigation bar button image, if you wish to apply the modified navigation bar attributes to all the navigation bars in all the documents in the site, select Apply to all similar navigation bars in the site. in the Navigation Bar Properties dialog box.

top


Inserting a path navigation bar

A path navigation bar shows the path from the home (the index page) to the current page. It helps you understand where the current page is positioned in the site structure.

  1. In the Site tab of the Site Manager, open the document to which you wish to insert a path navigation bar.
  2. Select the [Insert > Site Element > Navigation Bar...] menu command.
  3. In the Navigation Bar Properties dialog box select 'Path from home' in the Navigation bar type.
  4. Select Horizontal or Vertical in Orientation.
  5. Select shape of the navigation bar in the Type.
  6. Specify the target frame in Target and the target frame of the index page in Home target under Frame.
  7. Click OK.

Example

  1. In the Site tab of the Site Manager, open the document to which you wish to insert a path navigation bar.
  2. Select the [Insert > Site Element > Navigation Bar...] menu command.
  3. In the Navigation Bar Properties dialog box select 'Path from home' in the Navigation bar type.

  4. Select Horizontal in Orientation.
  5. Select Use text in Type.
  6. Select '_blank' for both Target and Home target in Frame.
  7. Click OK.

top


Inserting a navigation bar with submenu

You can create a navigation bar with a submenu which appears when you place the mouse-pointer over the navigation bar. The submenu will display hyperlinks of the sublevel documents.
  1. In the Site tab of the Site Manager, open the document to which you wish to insert the navigation bar with submenu.
  2. Select the [Insert > Site Element > Navigation Bar...] menu command.
  3. In the Navigation Bar Properties dialog box, select a Navigation bar type.
  4. Check to select Pop-up submenus.
  5. Click [image] and specify Text, Background, and Border in the Navigation Menu Settings dialog box.
    • Specify Font, Size, Normal, Highlight under Text.
    • Specify Color, Highlight , Width, Light, Dark under Background.
    • Specify Color and Size under Border and click OK.

  6. Select the Orientation and Type in the Navigation Bar Properties dialog box.
  7. Click OK.

top


Renaming navigation bars

You can change the names of the documents in the navigation bar. The names in the navigation structure will be used in navigation bars.

  1. Open the Site tab of the Site Manager.
  2. Click to select the document to rename in the Navigation window. When you select a document, the color of the selected document will change from 'light blue' to 'dark blue'.
  3. Select the [File > Rename] menu command, or click Rename [image] .
  4. Enter a new name and press <Enter>.


Changing the shape of the button navigation bar

You can change the shape of the Flash Buttons or Smart Buttons used in the navigation bars.

Changing the shape of smart buttons

  1. In the Edit window, double-click the navigation bar inserted in the document.
  2. In the Navigation Bar Properties dialog box, click [image] next to Use Smart Buttons.
  3. The Smart Button tab of the Resource Manager will open.
  4. Select a Smart Button and copy it into My smart buttons folder.
  5. Right-click the Smart Button and select {Modify...} in the shortcut menu.
  6. Make the modification you want in the Smart Button dialog box, and click Finish.
  7. Click OK in the Resource Manager.
  8. Click OK in the Navigation Bar Properties dialog box.
    • Before modification

    • After modification

Changing the shape of flash buttons

  1. In the Edit window, double-click the navigation bar inserted in the document.
  2. In the Navigation Bar Properties dialog box, click [image] next to Use Flash Buttons.
  3. The Flash Button tab of the Resource Manager will open.
  4. Select a button and click OK.
  5. Click OK in the Navigation Bar Properties dialog box.
    • Before modification

    • After modification

You can not modify flash buttons as you do with smart buttons. However, you can change the properties and the link in the Flash Button Properties dialog box. To open the Flash Button Properties dialog box, Select a Flash Button and copy it into My smart buttons folder. Right-click the Flash Button and select {Modify...} in the shortcut menu.

After modifying the appearance of a navigation bar button image, if you wish to apply the modified navigation bar attributes to all the navigation bars in all the documents in the site, select Apply to all similar navigation bars in the site. in the Navigation Bar Properties dialog box.

top


Changing the shape of text navigation bars

You can change text properties of the navigation bar, such as font, size, and color. You can change the name of the navigation bar in the Site tab of the Site Manager, and change text and separator shape in the Navigation Bar Text Settings dialog box.

Changing navigation text

  1. Double-click the text navigation bar in the Edit window.
  2. In the Navigation Bar Properties dialog box, click [image] next to Use text.
  3. Modify Navigation text in the Navigation Bar Text Settings dialog box.
  4. Click OK.

Changing separators

  1. Double-click the text navigation bar in the Edit window.
  2. In the Navigation Bar Properties dialog box, click [image] next to Use text.
  3. Modify the shape of the Separator in the Navigation Bar Text Settings dialog box.
  4. Click OK.


Changing the shape of submenu

Submenu is an optional part of a navigation bar that appears as you place the mouse-pointer over the text or button navigation bars. Submenu shows links to the documents that are in the sublevel of the hovered menu. You can change the appearance of the submenu.

  1. Double-click the navigation bar.
  2. In the Navigation Bar Properties dialog box, click [image] next to Pop-Up submenus.
  3. Set the properties of the submenu such as Text, Background, and Borders in the Navigation Menu Settings dialog box.
  4. Click OK in the Navigation Menu Settings dialog box.
    • Before modification

    • After modification

After modifying the appearance of a navigation bar button image, if you wish to apply the modified navigation bar attributes to all the navigation bars in all the documents in the site, select Apply to all similar navigation bars in the site. in the Navigation Bar Properties dialog box.


Inserting a navigation tree

A navigation tree is a tree-shaped navigation bar with which you can browse multiple levels of documents. A navigation tree is created inside a layer in the Edit window.

  1. Select a document in the Site tab of the Site Manager and open it.
  2. Select the [Insert >Site Element > Navigation Tree...] menu command.
  3. In the Navigation Tree Properties dialog box, select the top level of the tree. You will be able to browse all, and only, the documents under the top level document with the navigation tree.
  4. Specify Text, Bullet, and Frame.
    • Specify Font, Size, Normal, and Highlight.
    • Specify the shape of the bullets.
    • Specify the Target frame.

  5. Click OK.

If the name of the navigation tree is too long, it will appear in two lines. In such cases, simply enlarge the width of the layer.

top


Changing the shape of a navigation tree

You can change the shape of the navigation tree by modifying the text properties and changing bullet images.

  1. Double-click a navigation tree inserted in the Edit window.
  2. Change Font, Size, Normal, Highlight in the Text of the Navigation Tree Properties dialog box.
  3. Change the Collapsed and Expanded bullet images in Bullet. The bullets shows whether the specific navigation tree node is expanded or collapsed.
  4. Click OK.
    Before modification | After modification


Navigation Bar Properties dialog box

[Insert > Site Element > Navigation Bar...], {Navigation bar shortcut menu > Navigation Bar Properties}, Double-click a navigation bar

Navigation bar type

Include home page

Pop-up submenus

Show sublevel

Navigation tree

Orientation

Type

Frame

Apply to all similar navigation bars in the site.

A dynamic navigation bar is a set of links that updates automatically whenever you change the structure of the Web site. Dynamic navigation bars are automatically created by the Site Wizard, and you can add more anywhere you want using the [Insert > Site Element > Navigation Bar...] menu command. You can choose what kinds of targets the links in a dynamic navigation bar have, as well as choose between graphical and text links.

Dynamic navigation bars are only available in sites created using the Site Wizard and in other sites that have had a theme applied to them.

Navigation bar type

The selection of target group determines what links the navigation bar will have. Each document in the target group will be linked to in the navigation bar. The various target groups are described below.
  • User defined level
    Creates a navigation bar that links to the pages of certain level.
  • Top level in the structure
    Includes all documents at the first level of the navigation tree below the index page. This does not include the index page itself, which is at the top level.
  • Parent level of the current page
    Includes the current document's parent and all other documents at the same level as the parent.
  • Siblings
    Includes all "siblings" of the current document--that is, all documents that have the same parent as the current document. Other documents that are at the same level as the current document, but have different parents, are not included.
  • Child level of the current page
    Includes all children of the current document.
  • Path from home
    This selection creates a special kind of navigation bar that shows the "path" from the index page to the current document. This includes the current document, its parent, the parent's parent, and so on up to the index page. If text links are selected, the ">" character separates each link from the next.
  • Previous/Next
    Includes only the siblings to the immediate left and right of the current document.
  • Previous/Up/Next
    Includes the siblings to the immediate left and right of the current document, and its parent.
  • Previous/Home/Next
    Includes the siblings to the immediate left and right of the current document, and the index page.
  • Link to parent page
    Includes only the current document's parent.
  • Link to home
    Includes only the index page.
  • Page number links
    Creates a navigation bar that consists of numbered lists, each of its listing linked to a page of the same level and section as the current page.

Include home page

Check this check box to include the index page in the navigation bar, regardless of the selected target group.

Pop-up submenus

Adds a submenu which links to sublevel pages. The submenu "pops up" as you place the mouse-pointer over the navigation bar. Click [image] the set properties of the Submenu in the Navigation Menu Settings dialog box.

Show sublevel

Adds links to the sublevel documents in the navigation bar. Click [image] to set properties of the sublevel link in the Navigation Sublevel Settings dialog box.

Navigation tree

Shows the overall structure of the current site, with icons representing the documents in the tree. When you select a different target group in the Navigation bar type, the documents that will be linked to in the navigation bar are shown in gray blocks.

Orientation

Decide the orientation of the navigation bar.

  • Horizontal
    Aligns the navigation bar horizontally.
  • Vertical
    Aligns the navigation bar vertically. Vertical orientation is not recommended for Path from home navigation bars.

Type

Navigation bars can be made of text links or two types of graphical links: button and icon. Text and button links are available for all types of navigation bars, but image links are only available for navigation bars that have one of the following target groups: Previous/Next, Previous/Up/Next, Previous/Home/Next, Parent page, and Home. Specify the type of the object with which the navigation bar will be made.
  • Use text
    Creates the navigation bar in texts. Click [image] to specify the properties of the text in the Navigation Bar Text Settings dialog box.
  • Use Smart Buttons
    Creates the navigation bar with smart buttons. Click [image] to select a Smart Button in the Smart Button tab of the Resource Manager.
  • Use Flash Buttons
    Creates the navigation bar with flash buttons. Click [image] to select a Flash Button in the Flash Button tab of the Resource Manager.

Frame

Specify the target frame of the hyperlinks in the navigation bar.

  • Target
    Specify the frame where hyperlinked page will open.
  • Home target
    Specify the frame where the "home" page will open when linked.

Apply to all similar navigation bars in the site.

Applies the specified properties to the navigation bars of the similar style that are inserted in other documents of the current site.

top


Navigation Menu Settings dialog box

[Navigation Bar Properties dialog box > Pop-up submenus - [image]]

Text

Background

Borders

Text

Specify the text properties of the submenu.

  • Font
    Select the font type.
  • Size
    Select the font size.
  • Color
    Specify the text color.
  • Highlight
    Specify the text color to show when you place the mouse-pointer over the menu.

Background

Specify the background properties of the submenu.

  • Color
    Specify the background color of the submenu.
  • Highlight
    Specify the background color to show when you place the mouse-pointer over the menu.
  • Light
    Specify the color for the out-left, and in-right borders of the submenu.
  • Dark
    Specify the color for the in-left, and out-right borders of the submenu.
  • Width
    Specify the width of the submenu, in pixels.
  • Height
    Specify the height of the submenu, in pixels.

Border

Specify border properties of the submenu.

  • Color
    Specify the color of the submenu border.
  • Size
    Specify the thickness of the submenu border, in pixels.

top


Navigation Sublevel Settings dialog box

[Navigation Bar Properties dialog box > Show sublevel - [image]]

  • Top margin
    Specify the upper margin between the sublevel menu and the main menu.
  • Bottom margin
    Specify the bottom margin between the sublevel menu and the main menu.
  • Indent
    Specify the indentation.
  • Font size
    Specify the font size for the texts in the sublevel.

You can show sublevel menus only when you selected Vertical for the Orientation.


Navigation Bar Text Settings dialog box

[Navigation Bar Properties dialog box > Use text - [image]]

Navigation text

This section of the dialog box allows you to change the words that are used in text navigation bars to indicate links to "previous", "next", "home", and "parent" pages. Specify the texts to be shown in the navigation bar.
  • Previous
    Enter a text to use for links to the document that is to the left of the current document in the navigation tree.
  • Next
    Enter a text to use for links to the document that is to the right of the current document in the navigation tree.
  • Home
    Enter a text to use for links to the top-level document in the navigation tree (usually the site's index page).
  • Up one level
    Enter a text to use for links to the current document's parent document.

Separator

A separator is one or more characters that separate two adjacent links. You can modify the separators independently for three kinds of navigation bars: horizontal, vertical, and "path" navigation bars. (A path navigation bar contains links to the current page, the index page, and all the pages "between" the two, thus showing the path from the index page to the current page.) Specify the shape of the separator which separates each hyperlink.
  • 1
    Specify the shape of the separator placed in the left of the left-most hyperlink.
  • 2
    Specify the shape of the separator placed in the right of the left-most hyperlink.
  • 3
    Specify the shape of the separator placed in the left of the links in between the first and the last hyperlinks.
  • 4
    Specify the shape of the separator placed in the right of the links in between the first and the last hyperlinks.
  • 5
    Specify the shape of the separator placed in the left of the right-most link.
  • 6
    Specify the shape of the separator placed in the right of the right-most link.

Line height

Specify the spacing between links when placed vertically, in percentage of text size.

Page number links

Specify the number of pages to show when creating a Page number link navigation bars.

top


Navigation Tree Properties dialog box

[Insert > Site Element > Navigation Tree...]

Site

Text

Bullet

Frame

Site

Select the level which will be the top of the navigation tree.

Text

Specify the properties of the texts which appear on the navigation tree.

  • Font
    Specify the font type.
  • Size
    Specify the font size.
  • Normal
    Specify the color of the text.
  • Highlight
    Specify the color to show when you place the mouse-pointer over the text.

Bullet

Select the shape of bullets that are used to expand and collapse the node of the navigation tree.

  • Collapsed
    Specify the bullet which indicates that the node is collapsed.
  • Expanded
    Specify the bullet which indicates that the node is expanded.
  • Browse...
    Click to select an image file to use as a bullet in the Open dialog box.
  • Clip Art...
    Click to select an image file to use as a bullet in the Clip Art tab of the Resource Manager.
  • Site...
    Click to select an image file to use as a bullet from the site in the Select File dialog box.

Frame

Specify the target frame of the navigation tree.

  • Target
    Specify the target frame where the hyperlinked page should open.

top


Web Documents and Graphics

Graphic Elements in Web documents

Graphics are very important visual components in Web documents. Even the colors of the text, objects-- such as tables or layers--and the background are important factors in the way Web documents are perceived. But using various text properties cannot always be successful in creating the visual effects you want. In such cases, you can overcome the absence of variety by inserting images--necessities of Web documents. Namo WebEditor supports various image file formats - GIF, JPG and even PNG, BMP, WMF, SIS.

Text Only example:

Example with images:

When you want to use special fonts in your Web documents, you must convert text to images. If not, the font in your Web documents may be displayed as a basic font in your site visitor's browser, simply because the font is not supported by the visitor's system. You also need to convert the text to images when you want to apply effects such as a shadow or borders. Namo WebEditor offers Smart Buttons, which help you to easily create texts that are converted and saved as images with various effects. There are also many cases where you may wish to embed texts in an image or make an image blurry, for use as a background image. For such situations, Namo WebEditor offers various Image Effect features that let you apply numerous effects to your images.

Image created from the text:

Texts embedded in an image:

top


Web Documents and Colors

Colors are usually applied to the text, background, tables, or layers of Web documents. Various visual effects can be created with a combination of colors.

Color representation and RGB code

HTML documents use RGB code, which blends and specifies various colors based on the three basic colors--Red, Green, and Blue. The RGB code is composed of 6 hexadecimal numbers (0~F). For example, Red is F0000, Green is 00FF00 and Blue is 0000FF in this notation. Refer to the Table of Standard Web Colors below for the example.

RGB Table

Below is an example table of standard Web colors.

000000 R - 000 G - 000 B - 000 | 333333 R - 051 G - 051 B - 051 | 666666 R - 102 G - 102 B - 102 | 999999 R - 153 G - 153 B - 153 | CCCCCC R - 204 G - 204 B - 204 | FFFFFF R - 255 G - 255 B - 255
000033 R - 000 G - 000 B - 051 | 333300 R - 051 G - 051 B - 000 | 666600 R - 102 G - 102 B - 000 | 999900 R - 153 G - 153 B - 000 | CCCC00 R - 204 G - 204 B - 000 | FFFF00 R - 255 G - 255 B - 000
000066 R - 000 G - 000 B - 102 | 333366 R - 051 G - 051 B - 102 | 666633 R - 102 G - 102 B - 051 | 999933 R - 153 G - 153 B - 051 | CCCC33 R - 204 G - 204 B - 051 | FFFF33 R - 255 G - 255 B - 051
000099 R - 000 G - 000 B - 153 | 333399 R - 051 G - 051 B - 153 | 666699 R - 102 G - 102 B - 153 | 999966 R - 153 G - 153 B - 102 | CCCC66 R - 204 G - 204 B - 102 | FFFF66 R - 255 G - 255 B - 102
0000CC R - 000 G - 000 B - 204 | 3333CC R - 051 G - 051 B - 204 | 6666CC R - 102 G - 102 B - 204 | 9999CC R - 153 G - 153 B - 204 | CCCC99 R - 204 G - 204 B - 153 | FFFF99 R - 255 G - 255 B - 153
0000FF R - 000 G - 000 B - 255 | 3333FF R - 051 G - 051 B - 255 | 6666FF R - 102 G - 102 B - 255 | 9999FF R - 153 G - 153 B - 255 | CCCCFF R - 204 G - 204 B - 255 | FFFFCC R - 255 G - 255 B - 204
003300 R - 000 G - 051 B - 000 | 336633 R - 051 G - 102 B - 051 | 669966 R - 102 G - 153 B - 102 | 99CC99 R - 153 G - 204 B - 153 | CCFFCC R - 204 G - 255 B - 204 | FF00FF R - 255 G - 000 B - 255
006600 R - 000 G - 102 B - 000 | 339933 R - 051 G - 153 B - 051 | 66CC66 R - 102 G - 204 B - 102 | 99FF99 R - 153 G - 255 B - 153 | CC00CC R - 204 G - 000 B - 204 | FF33FF R - 255 G - 051 B - 255
009900 R - 000 G - 153 B - 000 | 33CC33 R - 051 G - 204 B - 051 | 66FF66 R - 102 G - 255 B - 102 | 990099 R - 153 G - 000 B - 153 | CC33CC R - 204 G - 051 B - 204 | FF66FF R - 255 G - 102 B - 255
00CC00 R - 000 G - 204 B - 000 | 33FF33 R - 051 G - 255 B - 051 | 660066 R - 102 G - 000 B - 102 | 993399 R - 153 G - 051 B - 153 | CC66CC R - 204 G - 102 B - 204 | FF99FF R - 255 G - 153 B - 255
00FF00 R - 000 G - 255 B - 000 | 330033 R - 051 G - 000 B - 051 | 663366 R - 102 G - 051 B - 102 | 996699 R - 153 G - 102 B - 153 | CC99CC R - 204 G - 153 B - 204 | FFCCFF R - 255 G - 204 B - 255
00FF33 R - 000 G - 255 B - 051 | 330066 R - 051 G - 000 B - 102 | 663399 R - 102 G - 051 B - 153 | 9966CC R - 153 G - 102 B - 204 | CC99FF R - 204 G - 153 B - 255 | FFCC00 R - 255 G - 204 B - 000
00FF66 R - 000 G - 255 B - 102 | 330099 R - 051 G - 000 B - 153 | 6633CC R - 102 G - 051 B - 204 | 9966FF R - 153 G - 102 B - 255 | CC9900 R - 204 G - 153 B - 000 | FFCC33 R - 255 G - 204 B - 051
00FF99 R - 000 G - 255 B - 153 | 3300CC R - 051 G - 000 B - 204 | 6633FF R - 102 G - 051 B - 255 | 996600 R - 153 G - 102 B - 000 | CC9933 R - 204 G - 153 B - 051 | FFCC66 R - 255 G - 204 B - 102
00FFCC R - 000 G - 255 B - 204 | 3300FF R - 051 G - 000 B - 255 | 663300 R - 102 G - 051 B - 000 | 996633 R - 153 G - 102 B - 051 | CC9966 R - 204 G - 153 B - 102 | FFCC99 R - 255 G - 204 B - 153
00FFFF R - 000 G - 255 B - 255 | 330000 R - 051 G - 000 B - 000 | 663333 R - 102 G - 051 B - 051 | 996666 R - 153 G - 102 B - 102 | CC9999 R - 204 G - 153 B - 153 | FFCCCC R - 255 G - 204 B - 204
00CCCC R - 000 G - 204 B - 204 | 33FFFF R - 051 G - 255 B - 255 | 660000 R - 102 G - 000 B - 000 | 993333 R - 153 G - 051 B - 051 | CC6666 R - 204 G - 102 B - 102 | FF9999 R - 255 G - 153 B - 153
009999 R - 000 G - 153 B - 153 | 33CCCC R - 051 G - 204 B - 204 | 66FFFF R - 102 G - 255 B - 255 | 990000 R - 153 G - 000 B - 000 | CC3333 R - 204 G - 051 B - 051 | FF6666 R - 255 G - 102 B - 102
006666 R - 000 G - 102 B - 102 | 339999 R - 051 G - 153 B - 153 | 66CCCC R - 102 G - 204 B - 204 | 99FFFF R - 153 G - 255 B - 255 | CC0000 R - 204 G - 000 B - 000 | FF3333 R - 255 G - 051 B - 051
003333 R - 000 G - 051 B - 051 | 336666 R - 051 G - 102 B - 102 | 669999 R - 102 G - 153 B - 153 | 99CCCC R - 153 G - 204 B - 204 | CCFFFF R - 204 G - 255 B - 255 | FF0000 R - 255 G - 000 B - 000
003366 R - 000 G - 051 B - 102 | 336699 R - 051 G - 102 B - 153 | 6699CC R - 102 G - 153 B - 204 | 99CCFF R - 153 G - 204 B - 255 | CCFF00 R - 204 G - 255 B - 000 | FF0033 R - 255 G - 000 B - 051
003399 R - 000 G - 051 B - 153 | 3366CC R - 051 G - 102 B - 204 | 6699FF R - 102 G - 153 B - 255 | 99CC00 R - 153 G - 204 B - 000 | CCFF33 R - 204 G - 255 B - 051 | FF0066 R - 255 G - 000 B - 102
0033CC R - 000 G - 051 B - 204 | 3366FF R - 051 G - 102 B - 255 | 669900 R - 102 G - 153 B - 000 | 99CC33 R - 153 G - 204 B - 051 | CCFF66 R - 204 G - 255 B - 102 | FF0099 R - 255 G - 000 B - 153
0033FF R - 000 G - 051 B - 255 | 336600 R - 051 G - 102 B - 255 | 669933 R - 102 G - 153 B - 051 | 99CC66 R - 153 G - 204 B - 102 | CCFF99 R - 204 G - 255 B - 153 | FF00CC R - 255 G - 000 B - 204
0066FF R - 000 G - 102 B - 255 | 339900 R - 051 G - 153 B - 000 | 66CC33 R - 102 G - 204 B - 051 | 99FF66 R - 153 G - 255 B - 102 | CC0099 R - 204 G - 000 B - 153 | FF33CC R - 255 G - 051 B - 204
0099FF R - 000 G - 153 B - 255 | 33CC00 R - 051 G - 204 B - 000 | 66FF33 R - 102 G - 255 B - 051 | 990066 R - 153 G - 000 B - 102 | CC3399 R - 204 G - 051 B - 153 | FF66CC R - 255 G - 102 B - 204
00CCFF R - 000 G - 204 B - 255 | 33FF00 R - 051 G - 255 B - 000 | 660033 R - 102 G - 000 B - 051 | 993366 R - 153 G - 051 B - 102 | CC6699 R - 204 G - 102 B - 153 | FF99CC R - 255 G - 153 B - 204
00CC33 R - 000 G - 204 B - 051 | 33FF66 R - 051 G - 255 B - 102 | 660099 R - 102 G - 000 B - 153 | 9933CC R - 153 G - 051 B - 204 | CC66FF R - 204 G - 102 B - 255 | FF9900 R - 255 G - 153 B - 000
00CC66 R - 000 G - 204 B - 102 | 33FF99 R - 051 G - 255 B - 153 | 6600CC R - 102 G - 000 B - 204 | 9933FF R - 153 G - 051 B - 255 | CC6600 R - 204 G - 102 B - 000 | FF9933 R - 255 G - 153 B - 051
00CC99 R - 255 G - 204 B - 153 | 33FFCC R - 051 G - 255 B - 204 | 6600FF R - 102 G - 000 B - 255 | 993300 R - 153 G - 051 B - 000 | CC6633 R - 204 G - 102 B - 051 | FF9966 R - 255 G - 153 B - 102
009933 R - 000 G - 153 B - 051 | 33CC66 R - 051 G - 204 B - 102 | 66FF99 R - 102 G - 255 B - 153 | 9900CC R - 153 G - 000 B - 204 | CC33FF R - 204 G - 051 B - 255 | FF6600 R - 255 G - 102 B - 000
006633 R - 000 G - 102 B - 051 | 339966 R - 051 G - 153 B - 102 | 66CC99 R - 102 G - 204 B - 153 | 99FFCC R - 153 G - 255 B - 204 | CC00FF R - 204 G - 000 B - 255 | FF3300 R - 255 G - 051 B - 000
009966 R - 000 G - 153 B - 102 | 33CC99 R - 051 G - 204 B - 153 | 66FFCC R - 102 G - 255 B - 204 | 9900FF R - 153 G - 000 B - 255 | CC3300 R - 204 G - 051 B - 000 | FF6633 R - 255 G - 102 B - 051
0099CC R - 000 G - 153 B - 204 | 33CCFF R - 051 G - 204 B - 255 | 66FF00 R - 102 G - 255 B - 000 | 990033 R - 153 G - 000 B - 051 | CC3366 R - 204 G - 051 B - 102 | FF6699 R - 255 G - 102 B - 153
0066CC R - 000 G - 102 B - 204 | 3399FF R - 051 G - 153 B - 255 | 66CC00 R - 102 G - 204 B - 000 | 99FF33 R - 153 G - 255 B - 051 | CC0066 R - 204 G - 000 B - 102 | FF3399 R - 255 G - 051 B - 153
006699 R - 000 G - 102 B - 153 | 3399CC R - 051 G - 153 B - 204 | 66CCFF R - 102 G - 204 B - 255 | 99FF00 R - 153 G - 255 B - 000 | CC0033 R - 204 G - 000 B - 051 | FF3366 R - 255 G - 051 B - 102

top


Various Image File Formats

Bitmapped images and Vector images

  • Bitmapped images
    Bitmapped images are the most common image-type found on the Web. GIF, JPEG, BMP, and PNG are all bitmapped image formats. A bitmap is an array of color values. Each color value determines the color of a pixel (one of the tiny dots that make up an image on your screen) in the image. For black and white images, the color value of each pixel can be expressed in a single bit of information as just 0 or 1. For color images, more bits per pixel are required. The more bits used to define the color values, the more colors an image can have, and the bigger the file size of the image becomes. These days, most computer graphics, including Web graphics, use 8, 16, 24, or 32 bits per pixel; 8 bits and 24 bits are most common.
    Bitmapped images are suitable for most types of images (and are the only choice for photographic images), and the most common formats are supported by all Web browsers (except text-only browsers), but they have two weakness compared to the other main image type--vector images: they have relatively large file sizes; they become blocky, or "pixellated", as you resize them. See the images below for an example of pixellation. The relatively large file sizes can be minimized using compression techniques such as JPEG, but there's nothing you can do about the pixellation. Because of this, it's generally advisable not to resize bitmapped images in your Web pages.

  • Vector images
    Unlike bitmapped images, which are defined by an array of color values, vector images are composed of vectors. Simply speaking, a vector is a line with a definite length and direction. Vector images can also include curves, although technically a curve is not a vector. The important point about vector images is that they are described by mathematical expressions, not by arrays of bits. This fact has two important consequences: vector images have relatively small file sizes, and they can be resized with no loss of smoothness (see the sample images below).

    There are two main drawbacks to using vector images in your Web pages, however. The first is that photographs cannot be saved as vector images, because it's impractical to describe the potentially millions of details in a photograph using mathematical expressions--it could be done, but the resulting image file would be much larger than a bitmapped image of the same photograph. The second drawback is that not all browsers support vector image formats. Windows Meta File (WMF) is the most common vector image format. Another format is Macromedia Flash, which is mostly used for vector-based animations.

Popular Web image formats

  • GIF
    Graphics Interchange Format (GIF) is a compressed bitmapped format that uses 8 bits per pixel. Originally developed by CompuServe, a once-popular online information service, GIF is one of the two most common image formats used on the Web (the other being JPEG). Since GIF images use only 8 bits per pixel, they can only contain up to 256 colors. Thus, they are not the best choice for photographs. The compression used in GIF images works by detecting repetitive areas in the image, such as areas of the same color. The compression method is lossless, meaning that no information is lost, but it is not very effective for compressing photographic images. Of the two most common Web image formats, GIF is preferred for non-photographic images, such as illustrations and screen shots, because of its lossless compression. GIF image files use the .gif file extension.
  • JPG (or JPEG)
    JPEG, which stands for Joint Photographic Experts Group--the organization that developed the format--is a highly-compressed 24- or 32-bit image format. JPEG images can be compressed to a small fraction of their uncompressed size using a lossy compression technique. The compression is called 'lossy' because it actually discards some information in the image. This is possible because the human eye is not particularly sensitive to subtle color changes. The level of compression can be specified when a JPEG image is saved. The greater the compression, the more information is discarded to reduce file size. At high levels of compression, the loss of detail can be quite visible--see the sample images below.

    (JPG example -- Original size)

    (JPG example -- 600% Magnification)

    In the magnified image above, notice the blocky, off-color areas in the tan-colored area and the bright outlines around the letters--both are artifacts caused by a high level of compression. Nevertheless, JPEG is the format of choice for photographic images on the Web, due to its support of full (24-bit) color and great compression ratios. JPEG image files use the .jpg or the .jpeg file extension.
  • PNG
    Portable Network Graphics (PNG), like GIF, is a bitmapped format that uses lossless compression. The PNG format has a number of advantages over GIF, including support for full-color (24-bit) images--making it suitable for photographic images--and gamma correction, which helps ensure that an image looks equally bright or dark on different monitors. Unfortunately, however, although PNG is supported by most modern Web browsers, it is not nearly as common as GIF (though this may change in the future). PNG images files use the .png file extension.
  • Interlaced GIF and Progressive GIF
    Usually, images on Web pages are displayed a few lines at a time, from top to bottom, as they are being downloaded by the browser. But interlaced GIF images and progressive JPEG images instead get progressively less blocky as they are being downloaded. The effect is similar to a picture coming into focus--see the sample below.

    This effect lets the site visitor get a rough view of the whole image, rather than a sharp view of part of the image, as he or she is waiting for the image to finish downloading. To make a GIF image interlaced or a JPEG image progressive, select the option when you save the image.
  • Animated GIFs
    An animated GIF image consists of several still images that are shown serially in rapid succession to produce an illusion of motion. Animated GIFs are very popular on the Web, since they are easy to make and supported by all browsers that can display images, whereas movie files, such as Windows Media and QuickTime files, are not. The sample image above that demonstrates progressive rendering is an animated GIF. Namo WebEditor comes with a utility called Namo GIF Animator, which you can use to make your own animated GIFs.

top


Images and the Loading Time

Inserting images in a Web document can increase the file size, which will have an effect on the loading time of the Web document. (Loading time refers to the time your Web browser spends bringing in a Web document from the World Wide Web.) The loading time will be overwhelmingly long, especially when you connect to the Internet using a modem. When you create a Web document, it is suggested that you take the loading time into consideration. The following are some suggestions that can help you avoid this problem.

Thumbnail image

A Thumbnail refers to a small image, whose size is greatly reduced from its original. When there is a slow loading time, inserted thumbnail images in your Web document indicate to visitors what images are presented at the site. The original images will appear in full size when clicked. You can easily create thumbnails using Namo WebEditor.

Image description (Alt Text)

Alt Text can be applied when you want to add some description about an image. Using Alt Text, you can let your site visitors read information on an image while they are downloading the image file.

Interlaced GIF and Progressive JPEG

Namo WebEditor supports Interlaced GIF and Progressive JPEG (JPG). These file formats let your browser show the image bit by bit, while downloading the image file. This effect lets the site visitor get a rough view of the whole image, rather than a sharp view of part of the image, as he or she is waiting for the image to finish downloading. To make a GIF image interlaced or a JPEG image progressive, select the option when you save the image.

top


Images and Smart Buttons

Images and Smart Buttons

GIF and JPG formats are the most widely used image file formats in Web documents. However, these formats use bitmap code, which makes it very difficult for you to resize an image without jeopardizing its quality. Namo WebEditor supplies you with Smart Buttons to solve this problem. Images created by the Smart Button dialog box in Namo WebEditor are saved as vector image files. You can resize the Smart Button images on your own without any worries that the images will be broken or out of focus. You can easily create text images, which are used as paragraph titles or buttons, as well as image titles for tables without any assistance from specialized graphics applications.

Why Smart Buttons?

  • Smart Buttons are vector images. Therefore, resizing Smart Button images will not degrade the quality of the images.
  • You can easily modify the text of your Smart Buttons at any time.


Image Map

An Image Map refers to an image that has sections designated to act as hyperlinks to different URLs. If you apply a hyperlink to an entire image, only one hyperlink for the image can be specified. However, if you make use of an image map, you can specify several hyperlinks to the image. In such cases, an image contains several areas serving as hyperlinks called Hot Zones.

An image map has been applied to the image below. If you place your mouse-pointer over the designated hot zone, the mouse-pointer will turn into a hand and you will see the text description applied to each hot zone.

Room#201 Room#202 Room#101 Room#102 Rounge


Color Picker

The Color Picker is a collection of colors where you can easily pick the color you want to use. The Color Picker is used to specify the colors of objects in your Web documents. Click the Color icon in the Inspector or dialog boxes to select a color in the Color Picker Pop-up or Color Picker dialog box. The Color Picker Pop-up contains 216 Web-safe colors. Web-safe colors have the same appearance in both Netscape Navigator and Internet Explorer, regardless of the Operating System.

Color Picker Popup

Click the Color icon in the Inspector or dialog boxes to open the Color Picker Pop-up.

  • Click [image] to open the Color Picker dialog box, where you can select a color from 16 million choices.
  • Click [image] to select from the colors currently used in the window. The color of the dropper's pointed spot is displayed along with the current color in the box at the top right.
  • Displays the color of the pointed spot in hexadecimal numbers.
  • If the selected color is one of the basic colors, its name is displayed in the text box.
  • The currently pointed color is displayed in the color box next to the color name.
  • The second row of the Color Picker Pop-up shows monochromatic colors and 6 basic colors (red, lime, blue, yellow, aqua, fuchsia). At the end of the row, with a red slash across, is the object's current default color.
  • The second last row displays the user defined colors.
  • The last row displays recently used colors in the order in which they were used.

Color Picker dialog box

Click [image] in the Color Picker Pop-up to open the Color Picker dialog box. You can make either 216 Web-safe colors or 16 million colors by controlling the 6 factors of colors.

See also

top


Inserting an image

  1. To insert an image into the current document, place the cursor where you want to image to appear.
  2. Select the [Insert > Image...] menu command, or click Insert Image [image] on the Standard Toolbar or press <Ctrl + Shift + I>.
  3. Specify the path and name of the image file in the Image Properties dialog box.
  4. Click OK.

    Namo Interactive Inc.

However you insert an image, Namo WebEditor will prompt you to copy the image file to the folder containing your document when you save the document. If the original image file is somewhere on your local hard drive or network, you should let Namo WebEditor copy it. If the original image file is on a Web site, and you wish to keep it there, do not let Namo WebEditor copy the image file.


Inserting a background image

You can insert a background image in the document.

Using Inspector

  1. Click [image] in the Document Inspector.
  2. Choose an image file in the Open dialog box and click Open.

Using the Document Background Image dialog box

  1. Select the [Insert > Image Element> Background Image...] menu command.
  2. Click Browse... in the Document Background Image dialog box and specify the path and name of the image.
  3. Click OK.

Alternatively, you can click Insert Clip Art [image] on the Standard Toolbar and click Insert As Bg after choosing a Clip Art image for the background.


Inserting Clip Arts

Insert a Clip Art image in the document. Click the Insert As Bg button in the Clip Art tab of the Resource Manager, if you want the Clip Art to be inserted as a background image for the document.
  1. Place the cursor where you want to insert a Clip Art image.
  2. Click Insert Clip Art [image] in the Standard Toolbar, or select the [Insert > Image Element > Clip Art...] menu command.
  3. In the Clip Art tab of the Resource Manager, select a group and then a folder from the category list in the left window.
  4. Click to select a Clip Art image in the Preview window on the right.
  5. The Filename and File size of the selected Clip Art image will be displayed in the status bar located below the Preview window.
  6. Click OK to insert the Clip Art image.

    7. (Example of a Clip Art image 'car02_a.gif' selected from the Transportation folder of the Image group.)


Adding Clip Arts

If you have one or more image files that you use frequently, you can add them to Namo WebEditor's Clip Art library for easy access. Select Make Thumbnail in the shortcut menu to sort the images in alphabetic order.
  1. Click [image] on the Standard Toolbar or select the [Insert > Image Element > Clip Art...] menu command.
  2. In the Clip Art tab of the Resource Manager, select a folder to which you wish to add an image.
  3. Click the Menu button and select Import File....
  4. Select a file in the Open dialog box.
  5. Select Open and the selected image will be added to the specified folder.

If you wish to remove an image from the Clip Art, select Delete in the shortcut menu.


Resizing images

You can resize the image inserted in the document. Bitmap images, such as GIF or JPG files, may look blurry when enlarged. Whereas the Vector images such as WMF or Flash files will remain sharp and clear regardless of their expanding size. If you want to restore the size of the image, click Image size restore [image] .

Using the Inspector

  1. Select an image
  2. In the Inspector, specify the size of the image in pixels or in percentage. You have to select the Height and Width check boxes to apply the specified size to the image.

Click Image size restore [image] to restore the size of the image.

Using the Image Properties dialog box

  1. Double-click an image.
  2. In the Image Properties dialog box, set the size of the image in pixels or in percentage. You have to select the Height and Width check boxes to apply the specified size to the image.
  3. Click OK.

If you enlarge an image, its loading time will increase accordingly.


Setting image borders

You can apply border to images. Specify the width in pixel. Border color is black by default.

Using the Image Inspector

  1. Select an image.
  2. Specify the width of the border in the Inspector.

Using Image Properties dialog box

  1. Double-click an image.
  2. Specify the width of the border in the Image Properties dialog box.

You can change the Style, Colors, Width of the border in the Borders tab of Style dialog box.


Aligning images

You can specify how to arrange images with the text. Text will be the basis for Top of Text, Absolute Middle, Absolute Bottom alignment and the image will be the basis for the rest of the alignments.

Using Inspector

  1. Select an image.
  2. Choose the alignment in the Inspector.

Using dialog box

  1. Double-click an image.
  2. Choose the alignment from the Alignment drop-down menu under Layout in the Image Properties dialog box, and click OK.

    (If you set the alignment of an image to the left, the text will show in the right as shown in the example.)


Creating hyperlinks on an image

You can create hyperlinks not just on words, but also on images. An image can be used as a single hyperlink, or several regions of the image can each have a link. If you want more than one hyperlinks, use Hot Zone. By creating an image map, you can have different regions of an image each act as a hyperlink to a different document. To create an image map, you use the Image Toolbar to draw invisible hot zones on various parts of the image. Each hot zone acts as a hyperlink.

Using the Hyperlink Toolbar

  1. Select an image.
  2. Enter the target URL in the Hyperlink text box in the Hyperlink Toolbar and press <Enter>, or select one from the previously entered URLs from the drop-down menu.

  3. Check if the link is valid in the Preview window.

    4. (Click the image to open Namo Interactive's Homepage.)

Using the Hyperlink dialog box

  1. Select an image.
  2. Select Hyperlink [image] on the Standard Toolbar, or select the [Insert > Hyperlink...] menu command.
  3. In the Create Hyperlink dialog box, enter the URL in the URL text box and click OK.

If you want to show the Hyperlink Toolbar, select the [View > Toolbars > Hyperlink] menu command.

top


Creating rollover images

You can create a rollover effect on an image. The image will be replaced by another image when the mouse-pointer is "rolled over" the image.

Using the Action window

  1. After selecting an image, click Add... in the Action window.
  2. In the Action Properties dialog box, select 'OnMouseOver' in the Event drop-down menu and 'Replace Image' for the Action.
  3. Specify 'Original image name' and 'Replacement image path' under Parameters.
  4. Click Ok. In the Action Properties dialog box, select 'OnMouseOut' in the Event drop-down menu and 'Restore Image' for the Action.
  5. Specify 'Image name' under Parameters.
  6. Click OK.

Using the Image Properties dialog box

  1. Double-click an image and click Create Rollover... in the Image Properties dialog box.

  2. Enter a name in the Script Wizard - Rollover Effect dialog box. The name must begin with a letter and may only contain letters, numbers, and underscores (_).
  3. Enter file path and name for the image that will be used as the "rollover image" when the mouse-pointer is over the image.
  4. Click Finish.
  5. Click OK in the Image Properties dialog box.

    6. (Place the mouse-pointer over the image above to see a rollover effect.)


Applying actions to an image

An action is a set of JavaScript effects that are pre-designed by Namo WebEditor. You can apply actions to an image by specifying a mouse event that triggers an action to take place.
  1. Select an image
  2. Click Add... in the Action window.
  3. In the Action Properties dialog box, specify an action, the event that triggers it, and any parameters associated with the action. For detailed information about adding actions, refer to Action Properties.

Actions added to an image are listed in the Action Window.

Example

  1. Insert an image and select it.
  2. Click Add... in the Action window.
  3. In the Action Properties dialog box select '(OnClick)' for Event and 'Popup Message' for Action from the drop-down menu. Type 'Welcome!' in the Message Text parameter.
  4. Click OK.

(When you click this image, the Popup message 'Welcome!' will appear.)


Setting the brightness/contrast/sharpness

You can set the brightness/contrast/sharpness of the image while viewing the changes applied to the image in the Preview window.
  1. Select an image.
  2. Select the [Tools > Image Effects...] menu command, or click Image Effects [image] on the Image Toolbar.
  3. Select from the followings in the Image Effects dialog box to modify image properties.
    • : Increases the brightness.
    • : Decreases the brightness.
    • : Increases the contrast.
    • : Decreases the contrast.
    • : Increases the sharpness.
    • : Decreases the sharpness.
  4. Click OK and Filename dialog box will appear.
  5. Enter the path and name for the modified image file, or click Browse... to specify the file location.
  6. Select Save format and click OK.

Values for Size, Brightness, Contrast, Sharpness is displayed in the bottom of the dialog box.

Click Reset to cancel the modification and restore the original image.

If the Image Toolbar is not shown, select the [View > Toolbars > Image] menu command.


Applying the bevel effect

You can apply the bevel effect to an image.

  1. Select an image.

  2. Select the [Tools > Image Effects...] menu command, or click Image Effects [image] on the Image Toolbar.
  3. Click Bevel Effect [image] in the Image Effects dialog box.
  4. Specify properties in the Bevel dialog box.

  5. Click OK in the Bevel dialog box.
  6. Click OK in the Image Effects dialog box and Filename dialog box will appear.
  7. Enter the path and name for the modified image file, or click Browse... to specify the file location.
  8. Select Save format and click OK.

Click Reset to cancel the modification and restore the original image.

If the Image Toolbar is not shown, select the [View > Toolbars > Image] menu command.

top


Applying the drop shadow effect

You can make an image cast a shadow which gives it a raised appearance. Also specify a background color for the leftover area when making a shadow effect. It is suggested to select a matching background color for the document to which the image with a shadow effect will be inserted.

  1. Select an image.

  2. Select the [Tools > Image Effects...] menu command, or click Image Effects [image] on the Image Toolbar.
  3. Click Drop Shadow [image] in the Image Effects dialog box.
  4. Specify the drop shadow properties in the Drop Shadow dialog box.

  5. Click Ok in the Drop Shadow dialog box..
  6. Click OK and the Filename dialog box will appear.
  7. Enter the path and name for the file, or click Browse... to specify the file location.
  8. Select Save format and click OK.

    9. (Example of an image with the drop shadow properties of 'Outer Shadow' for Type, '10 pixels' for Offset X, Offset Y, Blur, and 'blue' for Color.)

Click Reset to cancel the modification and restore the original image.

If the Image Toolbar is not shown, select the [View > Toolbars > Image] menu command.

top


Cutting images

You can cut off a certain portion of images using Crop function.

  1. Select an image.

  2. Select the [Tools > Image Effects...] menu command, or click Image Effects [image] on the Image Toolbar.
  3. Click Crop [image] in the Image Effects dialog box.
  4. Choose one of the followings:
    • Drag the resize handles to specify the new image.
    • Enter the desired values in H (Height) and W (Width) in the Imae Effects dialog box.
  5. Specify the roundness of the cropped area by using [image]. Placing the adjustment button to the right makes the cropped area more round.
  6. If the image has roundness, specify background color for the left over area by using the Feather function.
  7. Enter a value for Feather to make the cropped borders blurry. The higher the value, the more blurry the borders become.
  8. Click Accept Crop/Resize [image]. To cancel, click [image].

If you set the new image bigger than the original one, you can specify the background image for the blank area.

Click Reset to cancel resizing and restore the original image.

If the Image Toolbar is not shown, select the [View > Toolbars > Image] menu command.

top


Applying the frame effect

You can add various frames to images.

  1. Select an image.

  2. Select the [Tools > Image Effects...] menu command, or click Image Effects [image] on the Image Toolbar.
  3. Click Add Frame [image] in the Image Effects dialog box.
  4. Specify the Width, Roundness, Color of the frame in the Frame dialog box.

  5. Click OK in the Frame dialog box.
  6. Click OK and Filename dialog box will appear.
  7. Enter the path and name for the modified image file, or select Browse... to specify the file location.
  8. Select Save format and click OK.

Click Reset to cancel the task and restore the original image.

If the Image Toolbar is not shown, select the [View > Toolbars > Image] menu command.

top


Saving images with transparent colors

If the image you wish to insert in the document has a different background color than that of the document, you can synchronize the color by making the background color of the image transparent. If you click multiple spots, only the last selected color will change to be used as a transparent color. Select Interlace GIF to gradually sharpen the appearance of the image as it is loaded (see examples below).

(Ordinary GIF compared with Interlaced GIF)

To save an image with a transparent color, do this:

  1. Select an image.

  2. Select the [Tools > Set Transparent Color] menu command, or click Set Transparent Color [image] on the Image Toolbar or in the Inspector.
  3. Click on a spot when the mouse-pointer changes into a dropper [image] of which color you wish to make transparent.
  4. In the Save Image With Transparent Color dialog box, the color that is to be made transparent will be displayed.
  5. Specify the path and name of the new image file, and click OK.

If you select Interlaced GIF in the Save Image With Transparent Color dialog box, the image will be loaded by gradually clearing its appearance.

If the Image Toolbar is not shown, select the [View > Toolbars > Image] menu command.

top


Rotating images

You can rotate or flip an image to the direction you desire. Flip Vertical flips the image upside down and Flip Horizontal left-side right.

  1. Select an image.
  2. Select the [Tools > Image Effects...] menu command, or click Image Effects [image] on the Image Toolbar.
  3. Select from the followings to rotate the image.
    • : Rotates the image 90 degrees counterclockwise.
    • : Rotates the image 90 degrees clockwise.
    • : Flips the image upside down.
    • : Flips the image left-side right.
  4. Click OK and the Filename dialog box will appear.
  5. Enter the path and name for the file, or click Browse... to specify the file location.
  6. Select Save format and click OK.

Click Reset to cancel the modification and restore the original image.

If the Image Toolbar is not shown, select the [View > Toolbars > Image] menu command.


Resizing images

You can resize images using the Resize function in the Image Effects dialog box.

  1. Select an image.

  2. Select the [Tools > Image Effect] menu command, or click Image Effects [image] on the Image Toolbar.
  3. Click Resize [image] in the Image Effects dialog box.
  4. Select one of the following methods:
    • Drag one of the 5 resize handles to resize the image. Dragging the handle while holding down the <Shift> key keeps the width/height ratio.
    • Enter the desired values in H (Height) and W (Width) in the Image Effects dialog box.

  5. Click Accept Crop/Resize [image]. To cancel, click [image].
  6. Click OK in the Image Effects dialog box and Filename dialog box will appear.
  7. Enter the path and name for the modified image file, or click Browse... to specify the file location.
  8. Select a Save format and click OK.

The Resize Scale width and height is displayed in the status bar at the bottom.

Click Reset to cancel resizing and restore the original image.

If the Image Toolbar is not shown, select the [View > Toolbars > Image] menu command.

top


Creating a hot zone

By creating an Image Map, you can have different regions of an image each act as a hyperlink to a different document. As you move the mouse over various areas of the image, the mouse-pointer changes to a hand, indicating that there is a hot zone under the mouse-pointer. If you were to click on a hot zone, you would be taken to a different document.
  1. Select an image.
  2. Select [Insert > Image Element > Image Map] or click the relevant button in the Inspector or on the Image Toolbar.
    • : Creates a circular hot zone.
    • : Creates a rectangular hot zone.
    • : Creates a Polygonal hot zone.
  3. The mouse-pointer will turn into a cross (+).
  4. Drag the mouse to specify the hot zone.
  5. Release the mouse button after specifying the hot zone.

  6. When you release the mouse button, the Create Hyperlink dialog box will appear, and you can enter the URL for the hot zone you just created.

If the Image Toolbar is not shown, select the [View > Toolbars > Image] menu command.


Modifying a hot zone

You can modify the hot zone using Image Map.

  1. Select an image that contains Image Map.
  2. Select the [Insert > Image > Image Map - Select or Edit Hot Zone] menu command or click Select or Edit Hot Zone [image] on the Image Toolbar or in the Image Inspector.
  3. When you move the mouse-pointer over the image, the pointer turns into a hand when it's over a hot zone. To select a hot zone, just click once while the hand pointer is active.
  4. To move the hot zone to a new location, just drag it with the hand-shaped mouse-pointer.

If the Image Toolbar is not shown, select the [View > Toolbars > Image] menu command.


Document Background Image dialog box

[Insert > Image Element > Background Image]

  • Image path
    Enter the URL of the image file you wish to insert as a background image.
  • Browse... button
    Click to select an image file in the Open dialog box.
  • Clip Art... button
    Click to select a Clip Art image from the Clip Art tab of the Resource Manager.
  • Site... button
    Click to select from the images included in the site, if any. This button is activated only when the site is open.


Color Picker dialog box

[Color Picker Pop-up - Color Picker button],

User defined colors

Color Preview

Add to Custom Colors

Color dropper

User defined colors

  • 216 color table
    Shows a table which contains 216 Web-safe colors. Click a color and the hexadecimal code of the color will show in the HTML text box.
  • HTML
    Shows RGB code of the selected color in hexadecimal value. This value is how the color codes are inserted in the HTML window.
  • Name
    Shows the name of the color, if it's one of the basic colors.
  • Red, Green, Blue
    Shows the RGB value of the selected color. You can enter the RGB value to specify a color.
  • Hue, Saturation, Brightness
    Shows the hue, saturation, brightness of the selected color. The values range from 0 to 255. You can enter these values to specify a color.

Color preview

You can compare the selected color with the current color.

  • Current
    Shows the color of the are where the cursor is currently located.
  • New
    Shows the color you have selected in the Color Picker dialog box.

Add to Custom Colors

Click Add to Custom Colors to add the selected color to the custom color list on the lower left portion of the dialog box.

Color dropper

You can select a color from the current window. After clicking the Color dropper [image], click anywhere in the window to select a color that is currently displayed. For example, you can use a specific color of a picture by clicking on the color you want to use.

top


Image Inspector

The Image Inspector is activated only when you select an image inserted in your Web document. You can change properties of the image in the Image Inspector without opening a dialog box. Press <Enter> or simply move the focus elsewhere to apply the modification. The Image Inspector consists of some useful features of the Image Toolbar and major parts of the Image Properties dialog box.

See also


Clip Art

[Insert > Image Element> Clip Art...],

In the Clip Art tab of the Resource Manager, first select a group and then a folder in the left window. The Clip Art images in the selected folder will be displayed in the right window. Select a Clip Art image you want in the right window, and the buttons located on the bottom will be activated.

  • Insert As Bg
    Inserts the selected Clip Art image as background image of the document.
  • OK
    Click to insert the selected Clip Art image in the current document.
  • Cancel
    Click to close the Resource Manager.
  • Menu
    Using the Menu button, you can manage your Clip Art resources by adding or deleting files/folder/group and modifying its structure.


Save Image with Transparent Color dialog box

[Tools > Set Transparent Color],

  • Save as
    Enter a file path and name for the transparent GIF image. Click Browse... to locate the image in the desired folder.
  • Transparent color
    Shows the color to be switched transparent.
  • Interlaced GIF
    Select to save the image as an interlaced GIF, which is formatted to load the image by gradually sharpening the focus.

To cancel the Set Transparent Color [image] mode, press the <Esc> key.


Filename dialog box

[Tools > Image Effects... - OK button]

Path

Enter the path and filename for the new image. You can enter a new file name or click Browse... to specify.

Save format

  • GIF
    Save the modified image in GIF format, which has a maximum of 256 colors. Suitable for images that have few colors.
  • JPG
    Save the modified image in JPEG format in 24 bits, which can accommodate millions of colors. Suitable for pictures and high-quality images.
  • PNG
    Save the modified image in PNG (Portable Network Graphics) format, which has a maximum of 256 colors. This file format can only be viewed in the Netscape/Explorer 4.0 or higher.


Bevel dialog box

[Tools > Image Effects... - [image] button, ]

  • Style
    Select the type of bevel effect.
    • Flat | creates a flat bevel.
Sinusoidal | creates a sinusoidal bevel.
Circular | creates a circular bevel.
  • Width
    Specifies the width of the bevel effect. Higher the number, more beveled the button will be.
  • Angle
    Specifies the angle of the light source. It decides the direction of the shadow.
  • Preview
    You can preview the result the in the preview pane. If the image is too big to fit in the window, drag to move the image in the preview pane to view a specific part of the image.
  • +, - button
    You can increase of decrease the magnification of the image in the Preview window using these buttons.


Drop Shadow dialog box

[Tools > Image Effect... - [image] button]

  • Type
    Select a shadow type.
    • Outer Shadow | Creates the shadow outside the image.
Inner Shadow | Creates the shadow inside the image.
Outer Glow | Creates an outer glow.
Inner Glow | Creates an inner glow.
  • Offset X, Offset Y
     Specify the position of the shadow by the distance from the image. Offset value bigger than 0 places the shadow to the down-right side of the image, while smaller than 0 to the upper-left side. For the glow effect, offsets determine the size of the glow.
  • Color
    Specify a color for the shadow.
  • Blur
    Specify the amount of blurriness applied to the edge of the shadow.
  • Preview
    You can preview the result the in the preview pane. If the image is too big to fit in the window, drag to move the image in the preview pane to view a specific part of the image.
  • +, - button
    You can increase of decrease the magnification of the image in the Preview window using these buttons.


Frame dialog box

[Tools > Image Effects... - [image] button]

  • Width
    Enter the width of the frame from 1 to 100 pixels.
  • Roundness
    Enter the radius of the Roundness from 1 to 100 pixels. Higher the number, more rounded the corners will be.
  • Color
    Specify the color of the frame.
  • Preview
    You can preview the result the in the preview pane on the right. If the image is too big to fit in the window, drag to move the image in the preview pane to view a specific part of the image.
  • +, - button
    You can increase of decrease the magnification of the image in the Preview window using these buttons.


Image Properties dialog box

[Insert > Image...], <Ctrl + Shift + I>,

Click one of the following items for details. Click once more to close the details.

  • Image path

    • Insert a URL of the image.

    • Click the Browse... button to select from the local hard drive.
    • Click to select from the Clip Art... tab of the Resource Manager.
    • Click the Site... button to select from the files included in the site. This button is enabled only when the site is open.
  • Alt_text

    • Enter a short comment that describes the image. This comment will be used in the tooltip for the image when the mouse-pointer is placed over the image in the browser window. (Internet Explorer/Netscape Navigator 4.0 or higher)

  • Layout
    • Alignment
      Specifies the alignment of images and text.
      • Top | Aligns the top of the image with the top of text.
Middle | Aligns the middle of the image with the baseline of text.
Baseline | Aligns the bottom of the image with the baseline of text.
Bottom | Aligns the bottom of the image with the bottom of text.
Left | Places the image at the left side of the paragraph containing the image. Text in the paragraph flows to the right of the image.
Right | Places the image at the right side of the paragraph containing the image. Text in the paragraph flows to the left of the image.
Top of Text | Aligns the top of the image with the top of the tallest characters in the same line. This is usually but not always the same as top alignment.
Absolute Middle | Aligns the middle of the image with the middle of text in the same line.
Absolute Bottom | Aligns the bottom of the image with the bottom of the lowest characters in the same line.
    • Horizontal spacing
      Specifies the horizontal margin of the image in pixels.
    • Vertical spacing
      Specifies the vertical margin of the image in pixels.
    • Border thickness
      Specify the thickness of the border in pixels. Enter '0' for no borders.
  • Advanced
    • Low resolution
      Specifies, optionally, a low resolution version of the image to show when the original image is unable to be downloaded properly.

    Click Browse... to select an image file on your local drive.

    Click Clip Art... to select an image from the Clip Art tab in the Resource Manager.

    Click Site... to select an image file saved in the current site (available only when working on a project).
  • Name attribute
    Enter a name of the image. This name is used for identification purposes when the image is used by JavaScript and other programs.
  • Preview

    You can preview the result the in the Preview window. If the image is too big to fit in the window, drag to move the image in the Preview window to view a specific part of the image. Under the Preview window, Size of the image and File size are displayed in pixels and bytes, respectively.

  • Size
    • Width/Height
      Specify the size of the image in pixels or in percentage respect to the whole document. This option can only be applied when Width/Height is selected.
    • Constrain proportions
      Select to maintain the original width/height ratio. Deselect this option to specify Width/Height without maintaining the original ratio.
    • Restore Original Size
      Click to restore the image to the original size in pixels.
  • Style...

    • Click to apply styles to the image.

  • Create Rollover...

    • Click to add a Rollover effect to the image in the Script Wizard.

  • Create Hyperlink...

    • Click to add a Hyperlink to the image.


Image Effects dialog box

[Tools > Image Effects...], <Alt + Shift + I>,

Brightness, Contrast, and Sharpness

Rotate and Flip

Image Effect

Editing Images

Buttons

Background Color

Status Bar

Brightness, Contrast, and Sharpness

  • Adjusting the brightness
    Click [image] or [image] to adjust brightness of the image by degrees. Clicking [image] makes the image brighter while clicking [image] makes the image darker.
  • Adjusting the contrast
    Click [image] or [image] to adjust the color contrast of the image by degrees. Clicking [image] makes the image increase its contrast while clicking [image] makes the image decrease its contrast.
  • Adjusting the sharpness
    Click [image] or [image] to adjust the sharpness of the image by degrees. Clicking [image] makes the image blurry while clicking [image] sharpens the image.

Rotate and Flip

  • Rotate Left
    Click [image] to rotate an image 90 degrees counterclockwise.
  • Rotate Right
    Click [image] to rotate an image 90 degrees clockwise.
  • Flip Vertical
    Click [image] to flip an image upside down.
  • Flip Horizontal
    Click [image] to flip an image left-side right.

Image Effect

  • Add Frame
    Click [image] to apply various frame effects to the image.
  • Bevel Effect
    Click [image] to apply various bevel effects to the image. The image looks bulged after you have applied this effect.
  • Drop Shadow
    Click [image] to apply various shadow effects the an image.
  • Zoom
    You can increase or decrease the magnification of the image by selecting a percentage of the magnification from the Zoom drop-down menu.

Image Editing

  • Crop
    Click [image] to crop an image as you want.
  • Resize
    Click [image] to resize an image as you want.
  • Width
    If you select [image] or [image], enter the desired W idth or specify the Width using increase/decrease buttons.
  • Height
    If you select [image] or [image], enter the desired Height or specify the Height using increase/decrease buttons.
  • Roundness
    If you select [image], you can adjust the roundness of the cropped area by using [image]. Placing the adjustment button to the right makes the cropped area more round.
  • Feather
    If you select [image], Feather [image] makes the cropped borders blurry. The higher the value, the blurrier the borders become.

Buttons

  • Accept Crop/Resize
    Click [image] to complete the Crop or Resize task.
  • Cancel Crop/Resize
    Click [image] to cancel the Crop or Resize task.
  • Reset
    Click Reset to cancel all the effect applied to the image and take the image back to the original state.

Backgrond color

  • Transparent
    If you have applied shadow effects to an image or cropped an image in a non-rectangular shape, you can set the background as transparent by checking Transparent. To use the Transparent option, the image file format must be GIF or PNG, which support transparent background.
  • Background (BG)
    Specifies the background color of the image .If you have checked Transparent, the background color is ignored.

Status bar

The status bar at the right bottom of the Image Effects dialog box displays information such as image size, brightness, contrast, and sharpness.

top


Image Format Conversion dialog box

Convert Image Format dialog box

[Image shortcut menu - Image > Convert Image Format...]

Save as

Enter the path and filename for the new image. You can enter a new file name or click Browse... and select an existing file.

Save format

  • GIF
    Save the modified image in GIF format, which has a maximum of 256 colors. Suitable for images that have few colors.
    • Interaced
      Check this option to save the image as interlaced GIF format.
    • Transparent
      Check this option to save the image as a transparent GIF. Specify the color to be displayed as transparent in the Color Picker Pop-up on the right.
  • JPG
    Save the modified image in JPEG format in 24 bits, which can accommodate millions of colors. Suitable for pictures and high-quality images.
    • Type
      • Lossy: Compresses image in high ratio. File size is reduced much but image quality becomes somewhat low.
      • Progressive: Like interlaced GIF, the progressive JPEG images get progressively less blocky as it is being downloaded.
    • Quality: the higher the number, the quality of the image becomes high. 100 provides the highest quality.
  • PNG
    Save the modified image in PNG (Portable Network Graphics) format, which support 24 bit color. This file format can only be viewed in the Netscape/Explorer 4.0 or higher.
  • SIS
    Save the modified image in SIS format. SIS (Simple Image Service) format is a compressed GIF format used for mobile systems.
    • Type
      • 256 color: Select to create an image that can contain 256 colors.
      • 16 gray: Select to create an image that can contain 16 different gray colors.
      • Black & white: Select to create a black and white image.


What is a Photo Album?

A Photo Album is a photograph management tool; an enhanced feature of Namo WebEditor 4's Image Gallery.

You can insert multiple images, creating thumbnails for them along with links to the original images. This is a very powerful and convenient feature that lets you automatize complex tasks of inserting photographs, creating thumbnails, and setting proper hyperlinks by offering three simple steps: Photo Album - Select Files, Photo Album - Select Type, and Thumbnail Settings.

With the popularization of digital cameras, it is now common to upload digital photographs on the Web. Using Photo Album, you can work with digital photographs in various ways.


What is a Thumbnail?

What is a Thumbnail?

A thumbnail refers to a small image inserted into a Web page to represent its original image. Inserting multiple images in a Web page makes the visitors' downloading time long. Accordingly, it is suggested to let site visitors check the layout of original images through the thumbnails and to display the original image on a separate page when the corresponding thumbnail is clicked.

Applying various effects to a thumbnail

Namo WebEditor 5 supports various thumbnail effects, which enables you to build a creative and stylish homepage.

  • No Effect
    By default, no effect is applied to a thumbnail image.
  • Bevel Effect
    Makes a thumbnail image with a bulged look, like a button.

  • Shadow Effect
    Applies a shadow to a thumbnail image. This effect can be used with other effects.

  • Frame Effect
    Places a frame-shaped bitmap image around the thumbnail image as if the image has been inserted in a picture frame. Several frame effects are available.

  • Slide Holder Effect
    Reduces and places the original image on a ready-made bitmap image that looks like a slide holder. You can choose from several kinds of slide holders.

top


Selecting files for Photo Album

The Photo Album creation is made up of three simple steps: Photo Album - Select Files, Select Type, and Thumbnail Settings. In the first step of file selection, you should select the image files that will constitute a Photo Album.

  1. Select the [Tools >Create Photo Album...] menu command. You should save the current document first because it is impossible to create a Photo Album without saving the document. In case you have tried to create a Photo Album without saving the document, the message "Can't make the photo album because the current document is unsaved. Please save the file before making the photo album." appears.
  2. To add image files, take the following steps.
    • Click Add File.... Specify the files you want in the Open dialog box and click Open.
    • To add all the files in a specific folder, click Add Folder... and specify the folder you want and click OK. To include all the image files in the sub-folder of the specified folder you are to select, check Include subfolders.
  3. Filenames of the selected files appear in the Filename list box under Original image list. Click one file to see its preview in the Preview area in the right.

  4. To change the order of the files, select a file whose order should be changed and click the Up or Down button.
  5. To remove a file from the Filename list, select the file you want to remove and click Remove.
  6. After selecting all the image files you want, click the Next> button. The Photo Album - Select Type dialog box appears.

You can select multiple files by clicking the filenames while holding down the <Ctrl> key or the <Shift> key.

By clicking the Detail Settings...button, you can specify caption or save the file copies in a specified folder.

top


Selecting a layout style

At the second step, Photo Album - Select Type , you can select the layout style of a Photo Album.

  1. In the Photo Album - Select Type dialog box, select the Photo Album layout style from the Type drop-down menu. You can see the preview of the selected layout style in the preview area and the brief description of the type you have selected in Description.
    • Replace current window with full-size image
      Selecting this option lets you see the original image in the current browser window. Checking Create HTML document creates an HTML document containing the original image. Previous/Top/Next links are automatically inserted in each HTML document. Clicking Top leads you to the document containing thumbnails. Clicking Next/Previous leads you to the next/previous image. If you do not select Create HTML document, Photo Album will show the original image directly. (See example.)
    • Show each full-size image in a new window
      Selecting this option lets you see the original image in a new browser window when you click a thumbnail. If you click another thumbnail, another browser window displaying the original image will open. The window size is adjusted to the size of each original image. (See Example.)
    • Show each full-size image in the same window
      Selecting this option lets you see the original image in a new browser window when you click a thumbnail. If you click another thumbnail, the same browser window will display the original image. (See example.)
    • Show thumbnails and full-size images together
      Selecting this option lets you see the original image under the thumbnail list when you click a thumbnail. Clicking another thumbnail displays its original image replacing the previous original image. By default, the original image of the first thumbnail is displayed. (See example.)
    • Show full-size images only (no thumbnails)
      If you select this option, no thumbnails will be created. Instead, the original images will be displayed.
  2. Select the option(s) you want in Settings. Setting options are different depending on the type you have selected in the Photo Album - Select Type dialog box.
    • Replace current window with full-size image
      You can specify Target Frame and Create HTML document.
    • Show each full-size image in a new window
      You can specify all the properties except Window size, Target Frame and Create HTML document.
    • Show each full-size image in the same window
      You can specify all the properties except Target Frame and Create HTML document.
    • Show thumbnails and full-size images together
      No option can be specified.
    • Show full-size images only (no thumbnails)
      No option can be specified.
  3. You can arrange thumbnails in a table by checking Use table. Each thumbnail will be inserted in a cell, respectively.

  4. Click Next>. The Photo Album - Thumbnail Settings dialog box appears. If you have selected S how full-size images only (no thumbnails), click Finish.

By clicking the Detail Settings...button, you can specify caption or save the file copies in a specified folder.

top


Thumbnail effect

In Photo Album - Thumbnail Settings, the third step of Photo Album, you can specify the sizes of thumbnails and apply various effects.

  1. Select the [Tools > Create Photo Album...] menu command.
  2. Take the first two steps of Photo Album creation such as Photo Album-Select Files, Photo Album-Select Type.
  3. In the Photo Album - Thumbnail Settings dialog box, choose one of the following.
    • To make all the thumbnails the same size, select Specify exact size and specify Width/Height of the thumbnails. If you want to keep the width/height ratio of the original images, select Constrain proportions.
    • To create thumbnails in a specific ratio to the original image size, select Specify percentage of original size and specify Percentage.
  4. Under Thumbnail Effect select the effect you want to apply to thumbnail images.
  5. Select the background color from the Bg Color Picker Pop-up.
  6. To apply shadow effect, check Drop Shadow and specify Color and Offset. To make the shadow borders blurry, set relevant values in Blur.
  7. Click Finish and the message 'Processing' appears as Photo Album creates thumbnail images.

By clicking the Detail Settings...button, you can specify captions or save the file copies in a specified folder.

When you have selected Use table in the Photo Album - Select Type dialog box, you can edit the inserted table as you do with the ordinary tables created by selecting the [Table > New Table...] menu command.

top


Saving files

You can specify the folder in which the original images, thumbnail images, and created HTML files can be saved.

Saving copies of original images in the specified directory

  1. In the Photo Album dialog box, click the Detail settings... button.
  2. In the Photo Album Detail settings dialog box, click the Save tab.
  3. Select Save copies in the specified directory under Original Images.
  4. Type the path of the folder in the Save in text box or click Browse... and specify the folder in which you want to save the copies of the original images.

  5. Click OK.

Saving thumbnail images in the specified directory

  1. In the Photo Album dialog box, click the Detail settings... button.
  2. In the Photo Album Detail settings dialog box, click the Save tab.
  3. Under Thumbnail Images, type the path of the folder in the Save in text box or click Browse... and specify the folder in which you want to save the thumbnail files.
  4. Select the thumbnail file format from the File format drop-down menu.
  5. Add prefix or suffix to the original image file names under Naming to name thumbnails.
    • Choose Prefix and enter the phrase to be added to front of the filename.
    • Choose suffix and enter the phrase to be added at the end of the filename.
  6. Click OK.

Saving created HTML files in the specified directory

  1. In the Photo Album dialog box, click the Detail settings... button.
  2. In the Photo Album Detail settings dialog box, click the Save tab.
  3. Type the path of the folder in the Save in text box or click Browse... and specify the folder in which you want to save the created HTML documents.
  4. Add prefix or suffix to the original image names under Naming to name the newly created HTML files.
    • Choose Prefix and enter the phrase to be added to front of the filename.
    • Choose Suffix and enter the phrase to be added at the end of the filename.
  5. Click OK.

top


Inserting captions

You can easily add captions to thumbnails, such as filename, file size, number of order, etc.

  1. In the Photo Album dialog box, click the Detail Settings... button.
  2. In the Photo Album Detail settings dialog box, click the Captions tab.
  3. Select the Insert captions option under Caption Settings.
  4. Select the position of caption from the Caption position drop-down menu.
  5. Type captions in the Content text box or click [image] and select one of '&variable's from the drop down list.
    • Selecting Filename(&f) displays the filename in uppercase.
    • Selecting Extension(&e) displays the file extension in uppercase.
    • Selecting Image Size(&w) displays the image size in pixels.
    • Selecting File Size(&s) displays the file size plus its measure.
    • Selecting Creation Date(&d) displays the date of the image's latest modification, for example, '5-24-2001'.
    • Selecting Ordinal number(&n) displays the order of selection in Photo Album -Select Files step. Order of selection means the order in which image files were listed in the Photo Album - Select Files dialog box.
    • Selecting Line Break(&b) applies the line break where this tag is inserted.

  6. Click OK.

Example

Inserting Number of Order as a caption

  1. Enter 'namo' in the Content text box.
  2. Click [image] and select Ordinal number(&n). '&n' is added to the text in the Content text box. Now you can see 'namo&n' in the Content text box.
  3. Captions, which has number of order at its ending like 'namo1', 'namo2', 'namo3', are inserted to each thumbnail, respectively.

Inserting Filename as a caption

  1. Click [image] and select Filename(&f). '&f' is added to the text in the Content text box.
  2. Put a period(.) in the Captions text box.
  3. Click [image] and select Extension(&e). '&e' is added to the text in the Content text box.
  4. Now you can see '&f.&e' in the Content text box.
  5. For example, if the filename is 'NAMO.JPG', 'NAMO1.JPG' 'NAMO2.JPG' will be inserted respectively as a caption.

top


Photo Album - Select Files dialog box

[Tools > Create Photo Album...],

Original image list

  • Filename
    Displays the path of the image files added to the Photo Album.
  • Preview
    Shows the preview of an image file selected in the Filename list box.
  • Add File...
    Click Add File... to specify the image file you want to insert as a thumbnail in the Open dialog box.
  • Add Folder...
    To add all the image files in a specific folder, click Add Folder... and specify the folder you want and click OK.
  • Include subfolders
    Select this check box to include image files in subfolder(s) of the specified folder.
  • Number of selected images
    Shows the number of image files added to the Filename list box.
  • Up
    Moves a file, selected in the Filename list box, 1 step up.
  • Down
    Moves a file, selected in the Filename list box, 1 step down.
  • Remove
    Removes a file, selected in the Filename list box, from the list.
  • Detail Settings...
    Click to add captions to the thumbnails or to save the image files in specific folders.

top


Photo Album - Select Type dialog box

[Tools > Create Photo Album... - Select Type step], [image] - Select Type step

Type

Preview

Description

Settings

Use table

Type

You can select a layout style of Photo Album.

  • Replace current window with full-size image
    Select this option to see the original image in the current browser window. Checking Create HTML document creates an HTML document containing the original image.
  • Show each full-size image in a new window
    Select this option to see the original image in a new browser window when you click a thumbnail. If you click another thumbnail, another browser window opens to show the original image. The window size is automatically adjusted to the size of each original image.
  • Show each full-size image in the same window
    Select this option to see the original image in a new browser window when you click a thumbnail. If you click another thumbnail, the same browser window displays the original image.
  • Show thumbnails and full-size images together
    Select this option to see the original image under the thumbnail list when you click a thumbnail. Clicking another thumbnail displays its original image replacing the previous original image. By default, the original image of the first thumbnail is displayed.
  • Show full-size images only (no thumbnails)
    If you select this option, thumbnails will not be created. Instead, the original images will be displayed.

Preview

You can see the preview of a selected Photo Album layout type in the preview area under the Style drop-down menu.

Description

You can see the description of a selected Photo Album layout type in Description under the preview area.

Settings

Setting options are different depending on the type you have selected in the Photo Album - Select Type dialog box.

Layout | Available Setting Options
Replace current window with full-size image | You can specify Target Frame and Create HTML document.
Show each full-size image in a new window | You can specify all the properties except Window size, Target Frame and Create HTML document.
Show each full-size image in the same window | You can specify all the properties except Target Frame and Create HTML document.
Show thumbnails and full-size images together | No option can be specified.
Show full-size images only (no thumbnails) | No option can be specified.
  • Window size
    Specifies Width and Height of a new window.
  • Show toolbar
    If you select this option, a new window will be opened showing its toolbar.
  • Show menu
    If you select this option, a new window will be opened showing its menu.
  • Show scroll bar
    If you select this option, a new window will be opened showing its scroll bar.
  • Show status bar
    If you select this option, a new window will be opened showing its status bar.
  • Resizable
    If you select this option, a new window will be resizable.
  • Target frame
    Specify the Target frame when you create a hyperlink to an HTML file. This option is activated only when you have selected Show image in the current window in Type drop-down menu.
  • Create HTML document
    Checking this option creates a HTML document containing the original image. The created HTML document contains Previous/Top/Next links, allowing you to browse other images. This option is activated only when you have selected Show image in the current window in Type drop-down menu.

Use table

You can arrange thumbnails in a table by checking this option. Each thumbnail will be inserted in a cell, respectively.

  • Columns
    Specifies the number of columns of a table to be created. If you set Columns to '7', a table with 7 columns is created.

top


Photo Album - Thumbnail Settings dialog box

[Tools > Create Photo Album - Thumbnail Effects], [image] - Thumbnail Effects

Thumbnail Size

Thumbnail Effect

Background

Drop Shadow

Thumbnail size

  • Specify exact size
    If you select Specify exact size, the relevant options below will be activated. Photo Album creates thumbnails of the size you have entered in Width/Height. You can enter only integers from 4 to 300 in Width/Height.
    If you select Constrain proportions, the original width/height ratio will be maintained when creating thumbnails. Check this option if you also want to maintain the width/height ratio of the original images.
  • Specify percentage of original size
    If you select Specify percentage of original size, Percentage option will be activated for you to enter the relevant values in the text box. For example, if you have entered '30'%, the thumbnail is reduced to the 30% in both height and width of the original image. The default is set to 25%.

Thumbnail Effect

Select the effect you want to apply to thumbnail images. You can preview the effect applied to the thumbnail image in the Thumbnail Effect preview area. Use the scroll bar below to select more effects.

Bg (Background)

Specify the background color of the image from the Color Picker Pop-up. It is suggested to apply the same or similar color as the document background color so that the thumbnail images may not interfere with the atmosphere of the entire Web page.

Drop Shadow

You can apply various types of shadow effects to images by selecting Drop Shadow and specifying its properties such as Color, Offset, and Blur.

  • Color
     Specifies the color of the shadow.
  • Offset
     Specifies the distance between the image and shadow. You can enter the value manually or specify the value using the increase/decrease buttons.
  • Blur
    Specifies the degree to which you want to blur the shadow border. The higher this number, the blurrier the borders become.

Once you apply thumbnail effects to the images and insert them in a Web page, you cannot modify or cancel the effects you have applied. To change the thumbnail effects, you should take the entire steps again. Be cautious in deciding which effects you want to apply to the thumbnail images.

top


Photo Album - Detail settings - Captions tab

[Tools > Photo Album - Detail Settings... button - Caption tab]

Caption settings

  • Insert captions
    Select Insert captions and Caption position and Content will be activated. Specify caption contents in Content and their positions from the Caption position drop-down menu.
  • Caption position
    • Caption position | In case you have selected Use table | In case you have not selected Use table
Below | The cell below the thumbnail | The paragraph below the thumbnail
Over | The cell above the thumbnail | The paragraph above the thumbnail
Left side | The cell to the left side of the thumbnail | The paragraph to the left side of the thumbnail
Right side | The cell to the right side of the thumbnail | The paragraph to the right side of the thumbnail
  • Content
    Type captions in the Content text box or click [image] and select one of '&variable's from the drop down list.
    • Filename (&f) | Displays the filename in uppercase.
Extension (&e) | Displays the file extension in uppercase.
Image Size (&w) | Displays the image size in pixels.
File Size (&s) | Displays the file size
Creation Date (&d) | Displays the date when the image was last modified.
Ordinal number (&n) | Displays the order of selection in the Photo Album -Select Files step.
Line Break (&b) | Applies the line break where this tag is inserted.

top


Photo Album Detail settings - Save tab

[Tools > Create Photo Album - Detail Settings... button - Save tab]

Original images

Thumbnail images

HTML document

Original images

  • Save copies in the specified directory
    To copy and save the copies of the original images in a specific folder, choose this option.
  • Save in
    If you check the Save copies in the specified directory option, this text box will be activated. Type the path of the folder or click Browse... and specify the folder in which you want to save the copies of the original images.

Thumbnail images

  • Save in
    Type the path of the folder or click Browse... and specify the folder in which you want to save the thumbnail files.
  • File Format
    Select the thumbnail file format from the File format drop-down list. Choose from 'Same as original', 'GIF', 'JPEG' and 'PNG'.
  • Naming
    Choose prefix and enter the phrase to be added in front of the filename. For example, if you enter 'namo_', all the thumbnail files will have 'namo_' at the beginning of their file name.
    Choose suffix and enter the phrase to be added at the end of the filename. For example, if you enter '_namo', all the thumbnail files will have '_namo' at the end of their file name.

HTML document

  • Save in
    If you have selected Create HTML document at the Photo Album - Select Type step, type the path of the folder or click Browse... and specify the folder in which you want to save the created HTML files.
  • Naming
    Choose prefix and enter the phrase to be added in front of the filename. For example, if you enter 'namo_', all the thumbnail files will have 'namo_' at the beginning of their file name.
    Choose suffix and enter the phrase to be added at the end of the filename. For example, if you enter '_namo', all the HTML documents will have '_namo' at the end of their file name.

top


What is a Smart Button?

What is Smart Button?

A Smart Button refers to a vector-based image created by Namo WebEditor's Smart Button feature. You can create text images, usually used as paragraph headings, banners, buttons, and/or table titles. You can create various bullets, buttons, and banners using the Smart Button feature.

To create a Smart Button:

  • Select from a variety of pre-defined, generic button shapes in the Smart Button tab of the Resource Manager
  • Customize the generic shape and add optional text labels, if you wish.
  • Modify the text of a Smart Button by double-clicking the button and specifying the text you want.
  • Create a hyperlink on the button as with any other image, if you wish.

Why Smart Button?

You can use the Smart Button feature to create colorful, vector-based buttons and banners that can be resized without any loss of sharpness and edited at any time. You can create fascinating buttons in the Smart Button dialog box without using any professional graphic software. To obtain more detailed information on vector graphics, refer to Various image file formats.

When to use the Smart Button feature

  • when you are inserting a new Smart Button or editing an existing Smart Button.
  • when you want to change the appearance of the buttons in a navigation bar (in a document that uses a theme).
  • when you want to change the appearance of a banner (in a document that uses a theme).


Applying border properties to a Smart Button

You can apply various border properties to each component of a Smart Button.

  1. Select a Smart Button.
  2. Select Text or Shape, in the component list at the top right corner of the Smart Button dialog box.
  3. Click the Stroke tab below the component list box. Specify Type, Style, Width, Join, and Miter limit.

  4. Click Finish.


Applying various effects to a Smart Button

You can apply different effects to a Smart Button, such as Drop Shadow effect, Bevel effect, and Glow effect.

  1. Select a Smart Button.
  2. In the component list box at the right top, select the component to which a specific effect has been applied or should be applied and click the Effects tab.
  3. In the Effects tab, double-click the effect whose properties should be modified or click the Add Effect [image] at the bottom and select the effect you want to apply in the menu.
  4. Specify the properties of each effect in the selected dialog box.
    • Specify the properties of the Drop Shadow effect, such as Type, Offset X/Y, Blur, etc, in the Drop Shadow dialog box.
    • Specify the properties of the Bevel effect, such as Style, Width, Angle, in the Bevel dialog box.
    • Specify the properties of the Glow effect, such as Type, Offset, Blur, in the Glow dialog box.
  5. Adjust the order of applying the effects by selecting an effect and clicking Move Up [image] or Move Down [image] . Reordering effects can change the appearance of the Smart Button.
  6. Click Finish.
    • A button to which the Drop Shadow effect has been applied
    • A button to which the Bevel effect has been applied
    • A button to which the Glow effect has been applied


Changing the color and gradient of a Smart Button

You can change the color of Smart Button. Specify the color of each component of the Smart Button, such as Text, Shape, or Bitmap.

  1. Select a Smart Button.
  2. Select Text, Shape, or Bitmap in the component list box and click the Fill tab.
  3. Specify Type. You can choose from 'None', 'Solid Color', 'Linear Gradient', and 'Radial Gradient'.
  4. Select Style.
    • In case you have selected 'Solid Color': Choose the color in the Color Picker dialog box.
    • In case you have selected 'Linear Gradient' or 'Radial Gradient': Specify the properties of the gradient effect in the Gradient Editor dialog box. You can also specify the starting/ending point of the gradient effect using the Gradient [image] . Click the Gradient [image] and drag the mouse on the Smart Button component to specify the gradient attributes.
  5. Click Finish.
    • In case you have applied 'Solid Color' to the shape:
    • In case you have applied 'Linear Gradient' to the shape:


Setting the export area of a Smart Button

The Export Area refers to the area where the Smart Button is displayed in the Edit window. You can easily modify the export area of a Smart Button by dragging one of its resize handles.

  1. Select a Smart Button.
  2. Edit the button by modifying various properties of the Smart Button.
  3. Click Export Area [image] located at the top left of the Smart Button dialog box. Or you can click and drag one of the resize handles to the direction you want.

  4. Click Finish. The Export Area has been modified as you specified.

In case you have enlarged a Smart Button, the resized Smart Button may appear cropped in the Edit window. In such case, you should adjust the Export Area of the Smart Button.

Select the [Tools > Reset Export Area] menu command at left the bottom of the Smart Button dialog box to set the export area to the minimum area that can contain the Smart Button. This will prevent the unnecessary portion from occupying the Edit window.


Selecting a Smart Button

Opens the Smart Button dialog box. First, select a Smart button you want to insert in the document from the Smart Button tab of the Resource Manager.

  1. Select the [Insert > Smart Button...] menu command or click Insert Smart Button [image] on the Image Toolbar.
  2. Select a folder in the left folder list of the Smart Button tab in the Resource Manager.
  3. Select the Smart Button image you want to insert in the right preview area and click OK.
  4. The Smart Button dialog box, where you can modify various properties, is opened.


Positioning each component of a Smart Button

You can specify the position of each component of a Smart Button. Select each component in the preview area of the Smart Button dialog box and specify the x/y coordinate of the component. By using this method, you can create various buttons with only one Smart Button.

  1. Select a Smart Button.
  2. In the component list box at the top right corner of the Smart Button dialog box, select Shape n, Text n or Bitmap n.
  3. Click the Info tab.
  4. Specify Position X and Position Y. Position X is the distance between the left side of the preview area and the left-top corner of the component. Position Y is the distance between the top side of the preview area and the left-top corner of the component. The selected component moves to the designated X/Y coordinate in the preview area.


Saving a Smart Button in My Resource folder

Saving the customized Smart Button in My Resource folder allows you to use the button at anytime without repeating the steps to create the same button.

  1. Select the [Insert > Smart Button...] menu command.
  2. In the Smart Button tab of the Resource Manager, select the category in the left list and click a button you want in the right preview pane.
  3. Right-click the selected button and select {Modify as New...} in the shortcut menu.
  4. Edit the button as you wish in the Smart Button dialog box and click Finish.
  5. The modified button is inserted in the current folder.
  6. Drag the newly inserted button into the My Resource folder in the category list.

  7. The modified button appears in the My Resource folder.

You can also copy the built-in Smart Buttons into the My Resource folder.


Resizing a Smart Button

The Smart Button images are vector-based, which makes it possible to reduce or enlarge an image without any loss of its graphic quality. You can easily resize the Smart Button by dragging one of its resize handles. For the detailed information on vector images, see Various Image File Formats.

Resizing Smart Button text

  1. Select a Smart Button.
  2. In the preview area of the Smart Button dialog box, double-click the text.
  3. In the Text dialog box, specify the text size in Size and click OK.

Resizing Smart Button image

  1. Select a Smart Button.
  2. Select Shape in the component list box at the top right corner of the Smart Button dialog box.
  3. Take one of the following methods.
    • In the preview area, drag one of the resize handles.
    • At the Info tab, specify Width and Height.

You can also resize the entire Smart Button in the Edit window by selecting the button and dragging one of the resize handles.


Inserting a Smart Button

After editing a Smart Button in the Smart Button dialog box, insert it in the document.

  1. Select the [Insert > Smart Button...] menu command or click Insert Smart Button [image] on the Standard Toolbar.
  2. Select a folder in the left side of the Smart Button tab in the Resource Manager. Select the button you want in the preview area and click OK.

  3. In the Smart Button dialog box, edit the selected button by modifying the Text, Shape and Bitmap properties. You can also apply various effects.
  4. Click Finish.
  5. The Smart Button dialog box is closed and the edited Smart Button is inserted in the current document.


Editing a Smart Button text

You can modify the text of a Smart Button by modifying its contents, font type, font size, or alignment.

  1. Select a Smart Button.
  2. In the preview area of the Smart Button dialog box, double-click the text.
  3. The Text dialog box appears.
  4. Specify Font, Size, Align, etc.
  5. If you make the text bolded or slanted, check the Bold or Italic option.
  6. Enter text contents in the Text text box.

  7. Click OK.


Specifying the background color of a Smart Button

You can specify the background color of the Smart Button image and choose whether the background should be transparent. The background color is the color of the space between the button's visible area and the edges of the invisible "bounding box" surrounding it.

By default, the background color is set to white, which works well when the document has a white background. However, if the document has a background color other than white, it is a good idea to select Transparent at the Background tab so that the button will blend seamlessly with the document's background.

  1. Select a Smart Button.
  2. Click an empty spot in the preview area and click Bg color at the Background tab. Specify the background color in the Color Picker dialog box and click OK. To make the Smart Button to have a transparent background, select Transparent at the same tab.

  3. Click Finish.


Converting a Smart Button to an ordinary image

You can save a Smart Button image (*.npi, *.tng) as an ordinary image file (*.gif *.jpg *.jpeg *.png).

  1. Right-click the Smart Button inserted in the Edit window and select {Image > Convert to Standard Image...} in the shortcut menu.
  2. The message "Converting the selected item to a standard image will remove editability. Do you want to continue?" appears. Click Yes.

  3. In the Save As dialog box, select a folder in which to save the converted image file. Enter a filename of the file (or just accept the default name), specify the file format from the drop-down list, and click Save.
  4. The message "The selected equation, chart, or Smart Button has been converted to a standard image" appears.
  5. Click OK.

Converting a Smart Button image into a standard image will render it uneditable.


Smart Button dialog box

[Insert > Smart Button... - Smart Button tab of the Resource Manager - select a Smart Button - OK], [ [image] - Smart Button tab of the Resource Manager - select a Smart Button - Select Modify As New... in the shortcut menu]

Tool buttons

Tools menu

Preview area

Sheet drop-down list

Component list box

Attribute tabs

Finish

Cancel

In this dialog box, you can edit the Smart Button selected in the Smart Button tab of the Resource Manager.

Tool buttons

Frequently used tool icons are available at the top of the dialog box.

  • Select Tool
    Click to select and move a component. You can select and move multiple components by selecting them while holding down the <Shift> key. You can also make a copy of any component by selecting it while holding down the <Ctrl> key.
  • Export Area Tool
    Specifies the area visible in the Edit window.
  • Gradient Tool
    Click to specify the starting and ending point of a gradient effect, if you are working with a component to which the gradient effect has been applied.
  • Align Left
    Click to align the selected components to the left. The last selected component will be the criterion of alignment.
  • Align Center
    Click to align the selected components at the horizontal center. The last selected component will be the criterion of alignment.
  • Align Right
    Click to align the selected components to the right. The last selected component will be the criterion of alignment.
  • Align Top
    Click to align the selected components to the top. The last selected component will be the criterion of alignment.
  • Align Middle
    Click to align the selected components to the vertical middle. The last selected component will be the criterion of alignment.
  • Align Bottom
    Click to align the selected components to the bottom. The last selected component will be the criterion of alignment.
  • Undo
     Undoes the most recent editing action. Click repeatedly to undo previous actions in reverse sequence. If there is no recoverable task left, this button will be deactivated. You can also use the shortcut key <Ctrl + Z>.
  • Redo
    Redoes the last editing action that you "undid". Click repeatedly to redo previous undone actions in sequence. If there is no "redoable" task left, this button will be deactivated.
  • Zoom In
     Increases the magnification of the button preview. Click repeatedly to magnify the Smart Button preview. If the image reaches its maximum size, this button will be deactivated.
  • Zoom Out
    Decreases the magnification of the button preview. Click repeatedly to reduce the image by degrees. If the image reaches its minimum size, this button will be deactivated.

Tools menu

Click the Tools button at the bottom left corner and several editing menus appear. You can take care of the task of inserting components, undoing/redoing the task, etc, using the Tools menu.

  • Zoom In
    Magnifies the preview area by 100%, 200%, 400%, 800%, or 1600% in relation to the original image size.
  • Undo
    Undoes the most recent editing action.
  • Redo
    Redoes the last editing action that you "undid".
  • Arrange
    This submenu contains commands for adjusting the overlapping order of the Smart Button components. You can Send Backward or Bring Forward a component. You can also Send to Back or Bring to Front a component.
  • Rotate/Flip
    Rotates the selected component to different angles or flips it vertically or horizontally.
  • Delete
    Removes the selected component.
  • Insert Text
    Inserts a text component. Specify the properties of the text component in the Text dialog box.
  • Insert Vector Image
    Inserts a vector image component. Select the desired shape from the submenu.
  • Insert Bitmap
    Inserts a new bitmap image component. Select the source image file in the Open dialog box.
  • Reset Export Area
    Sets the export area to the minimum range that can contain the Smart Button components. This will prevent the unnecessary portion from occupying the Edit area.

Preview area

Displays the current Smart Button. Double-click the text to modify the text properties in the Text dialog box.

Sheet drop-down list

When the Smart Button is selected to be used as a navigation bar, you can modify the properties of button images corresponding to the state of a Smart Button. You can edit the Smart Button in each state - Normal, Rollover, and Highlight - by selecting the state from the drop-down menu and specifying the relevant properties. Selecting a sheet displays its sub-components in the component list box below.

Component list box

Shows the list of components of the current Smart Button at the upper right portion of the Smart Button dialog box.

  • Layer n
    Selects a specific layer of the button. If you select Layer n, a dotted rectangle will appear around the selected layer in the preview area.
  • Text n
    Select to edit the button's text label. If you select Text n, a rectangle will appear around the selected text component in the preview area. You can modify the text properties in the Info, Fill, Stroke, Effects tab below.
  • Shape n
    Select to edit various properties of a button's vector image. When you select Shape n, 8 resize handles appear around the selected vector image in the preview area. You can apply different properties to the selected shape in the Info, Fill, Stroke, Effects tab below.
  • Bitmap n
    Select to edit the properties of the button's bitmap image component, if any. When you select Bitmap n, 8 resize handles appear around the selected bitmap image in the preview area.

Attribute tabs

To display the attribute tabs, where you can modify the properties of each component, select a component in the component list box or in the preview area. Different attribute tabs appear depending on the component you have selected.

  • Background tab

    • Appears when you select Layer n in the component list box. Specifies the properties of the button background.

    Background color | Click to set a background color for the button using the Color Picker dialog box. The background color is the color that fills the area between the edges of the button shape and its bounding box (an invisible rectangular box surrounding the button at its maximum horizontal and vertical extension).
Transparent | Check this option to make the background color transparent (the color or image "behind" the button will show through the button's background). In case you have checked Transparent, the background color you have specified is ignored.
Position X/Position Y | Specifies the horizontal/ vertical offset of the button, in pixels. This field is not editable.
Width/Height | Specifies the width/height of the button background. These values change when you resize the button using the resize handles in the preview area. This field is not editable.

If you make the background color transparent, you should choose a background color similar to the color "under" the button. Due to aliasing artifacts, a transparent background color may be visible as a thin outline around the button's border. Choosing a background color similar to the underlying color of the document helps make the button's border as clean as possible.

  • Info tab

    • Appears when you have selected Text, Shape, or Bitmap in the component list box.

    Position X/Position Y | Specifies the vertical/horizontal position of the selected component, in pixels.
Width/Height | Specifies the Width/Height of the selected component.
Opacity | Adjusts the opacity of the selected component.
  • Fill tab

    • Appears when you have selected Text, Shape, or Bitmap in the component list box. You can specify color properties of the button components. You can make a component transparent, paint it with a solid color, or apply gradient effect to it.

    Type | None | Specifies no color properties.
 | Solid Color | Paint the selected component with a color.
 | Linear Gradient | Applies the linear gradient effect to the selected component.
 | Radial Gradient | Applies the radial gradient effect to the selected component.
Style | Specifies the color of the selected component in the Color Picker dialog box (if you have selected a Solid Color), or in the Gradient Editor dialog box (if you have selected Linear Gradient or Radial Gradient).
  • Stroke tab

    • Appears when you have selected Text, Shape, or Bitmap in the component list box. You can specify border properties of the button components. You can apply the same types of gradient effects as in the Fill tab.

    Type/Style

    The same as the Fill tab. Specifies the type/style of the stroke.

    Width

    Sets the width of borders. If this is '0', borders disappear.

    Join

    Miter

    Makes the corners (vertices) of the selected component miter-shaped.

    Bevel

    Makes the corners (vertices) of the selected component bevel-shaped.

    Rounded

    Makes the corners (vertices) of the selected component round.

    Miter limit

    In case you have selected Miter under Join, this sets limitation on mitering degree. This is enabled only when you have selected Miter for the Join type.

  • Effects tab

    • Shows the list of effects applied to the selected component. There are Drop Shadow, Bevel, and Glow effects. You can apply various effects by double clicking each effect and specifying relevant values in the Bevel, Drop Shadow, and Glow dialog box.

    Effect List | Displays the effects applied to the selected component. Double-click an effect to edit its properties.
Up | Moves the selected effect one step up. Reordering effects can change the appearance of the Smart Button.
Down | Moves the selected effect one step down. Reordering effects can change the appearance of the Smart Button.
Add Effect | Adds an effect to the selected component by specifying the effect properties in the Bevel, Drop Shadow, and Glow dialog box.
Remove Effect | Removes the selected effect from the effect list.

Finish

Closes the Smart Button dialog box and inserts the Smart Button you have worked with in the Edit window.

Cancel

Cancels all the modification you have made to the current Smart Button and closes the Smart Button dialog box.

top


Drop Shadow dialog box

[Smart Button dialog box - Effects tab - Double-click Drop Shadow Effect]

Appears in the Effects tab when you click a Smart Button component to which the Drop Shadow effect has been applied. You can specify properties of the Drop Shadow effect.

  • Type
    • Outer Shadow | Drops shadow outside the selected component.
Inner Shadow | Casts shadow inside the selected component.

  • Offset X/Y
    Specifies the horizontal and vertical offset, in pixels, of the shadow from the component. Enter positive numbers to place the shadow below and to the right of the component; enter negative numbers to place the shadow above and to the left.
  • Color
    Specifies the color of the shadow in the Color Picker dialog box.
  • Blur
    Specifies the blur radius (the degree of blurriness) of the shadow. A value of zero makes the shadow perfectly sharp.
  • Preview box
    You can preview the effects applied to a Smart Button in the preview box at the right side.
  • Zoom in
     Increases the magnification of the button preview. Click repeatedly to magnify the Smart Button preview. If the image reaches its maximum size, this button will be deactivated.
  • Zoom out
    Decreases the magnification of the button preview. Click repeatedly to reduce the image by degrees. If the image reaches its minimum size, this button will be deactivated.


Gradient Editor

[Smart Button dialog box - Fill/Stroke tab - Style button]

General

  • Name
    Specifies the name of the Gradient Effect.
  • Type
    • Linear | Linear gradient. The color and opacity of the selected component changes in a linear mode.
Circular | The color and opacity of the selected component changes in a circular mode.
  • Spread
    • General | Applies just one cycle of gradient effect. Colors before the starting point and beyond the ending point of the gradient follows the starting color and ending color, respectively.
Repeat | Applies the repeated gradient effect to the component in case the gradient range is shorter than the component.
Reversal | Applies the reversed gradient effect to the component if the gradient range is shorter than the component.

Color

  • Location
    Specifies the starting point of the selected gradient color. '0' means the starting point of the gradient and '100' means the ending point of the gradient.
  • Color
    Specifies the gradient color in the Color Picker dialog box.
  • Color Slide
    Displays the degree of the gradient effect. You can change the gradient color by double-clicking the slide bar [image] below the color slide and specifying the color in the Color Picker dialog box. Click anywhere on the bottom of the slide creates another slide bar, with which you can specify another color used for the gradient effect. To remove the slide bar, simply drag it outside the dialog box.

    Example: Color Slide by default

    Example: Color Slide with two slide bars added. The Color ('99FFFF') has been specified to the third slide bar from the left.

Opacity

top

  • Location
    Specifies the starting point of the selected gradient opacity.'0' means the starting point of the gradient and '100' means the ending point of the gradient.
  • Opacity
    Specifies the degree of opacity. '100' indicates the total opaqueness.
  • Opacity Slide
    Displays the degree of the gradient opacity. You can change the gradient opacity by positioning the slide bar [image] below the opacity slide. Click anywhere on the bottom of the opacity slide creates another opacity slide bar, with which you can specify another criterion used for setting the gradient opacity. To remove the slider bar, simply drag it outside the dialog box.

    Example: Opacity Slide by default

    Example: Opacity Slide with one slider bar added. The Opacity has been set to '50' for the slide bar in the middle.


Bevel Effect dialog box

Bevel dialog box

[Smart Button dialog box - Effects tab - Double-click Bevel Effect]

Appears in the Effects tab when you click a Smart Button component to which the Bevel effect has been applied. You can specify properties of the Bevel effect.

  • Style
    Flat | Applies angular bevel effect to the selected component.
Sinusoidal | Makes the beveled corners appear like sinusoid.
Circular | Applies rounded bevel effect to the selected component.

  • Width
    Specifies the height of the bevel effect. The larger this value, the more beveled the Smart Button appears.
  • Angle
    Specify the direction of the apparent light source, in degrees. 0 degrees means the light comes from the right.
  • Preview box
    You can preview the effects applied to a Smart Button in the preview box at the right side.
  • Zoom in
     Increases the magnification of the button preview. Click repeatedly to magnify the Smart Button preview. If the image reaches its maximum size, this button will be deactivated.
  • Zoom out
    Decreases the magnification of the button preview. Click repeatedly to reduce the image by degrees. If the image reaches its minimum size, this button will be deactivated.


Text dialog box

[Smart Button dialog box - double-click the Smart Button text]

Appears when you double-click the Smart Button text in the preview area. You can specify the font, font size, alignment, text contents, etc.

  • Font
    Select the font to use for the text component from the drop-down menu.
  • Size
    Enter the value manually or specify the value using the increase/decrease button.
  • Align
    Sets the alignment of the button text in terms of the text bounding box.. You can choose from 'Start', 'Middle', and 'End'.
  • Baseline
    Sets the baseline of the button text, which sets the vertical alignment in terms of the text bounding box. You can choose from 'Top', 'Middle', and 'Bottom'.
  • Bold
    Check this option to make the button text bolded.
  • Italic
    Check this option to make the button text slanted.
  • Text
    Specifies the contents of the button text.

If you are editing the buttons in a navigation bar, or you are editing a banner, the button (or banner) label is determined by the Navigation title of the target document (or, for a banner, the navigation name of the containing document), and not by the text entered here.


Glow Effect dialog box

Glow dialog box

[Smart Button dialog box - Effects tab - double-click Glow Effect]

Appears in the Effects tab when you click a Smart Button component to which the Glow effect has been applied. You can specify properties of the Glow effect.

  • Type
    • Outer glow | Creates the glow effect outside the selected component.
Inner glow | Creates the glow effect inside the selected component.
  • Offset
    Specifies the range the Glow Effect covers in terms of the selected component, in pixels.
  • Color
    Specifies the color of the glow in the Color Picker dialog box.
  • Blur
    Specifies the blur radius (the degree of blurriness) of the glow. A value of zero makes the glow perfectly sharp.
  • Preview box
    You can preview the effects applied to a Smart Button in the preview box on the right side.
  • Zoom in
     Increases the magnification of the button preview. Click repeatedly to magnify the image by degrees. If the image reaches its maximum size, this button will be deactivated.
  • Zoom out
    Decreases the magnification of the button preview. Click repeatedly to reduce the image by degrees. If the image reaches its minimum size, this button will be deactivated.


Inserting a Flash Button

You can insert a Flash Button in the document.

  1. Place the cursor where you want to insert a Flash Button.
  2. Select the [Insert > Flash Button...] menu command.
  3. Open a folder you want from the list in the left window of the Flash Button tab in the Resource Manager.
  4. Select a Flash Button in the preview pane in the right and click OK.
  5. Specify the button properties, such as width/height of the button, text, alignment, offset, font, link, target frame,and background color, in the Flash Button Properties dialog box and click OK.

You can import any external Flash Buttons as well. Click Menu in the Flash Button tab of the Resource Manager and select Import File.... In the Open dialog box, select the file you want to import and click Open. The selected Flash Button is inserted in the current folder.

Example

  1. Place the cursor where you want to insert a Flash Button.
  2. Select the [Insert > Flash Button...] menu command.
  3. Open the 'Buttons' folder in the left list of Flash Button tab in the Resource Manager.
  4. Select 'new1_1.swf' in the right preview area and click OK.
  5. Specify the button properties in the Flash Button Properties dialog box and click OK.


Changing the text of a Flash Button

sYou can modify the contents, font type and font size of the text of a Flash Button.

  1. Double-click the Flash Button inserted in the document.
  2. Re-enter the text you want to be insert in the Flash Button in the Text text box in the Flash Button Properties dialog box
  3. Specify the font type, font size you want from the Font and Size drop-down list.
  4. Click OK.

Example

  1. Double-click the Flash Button inserted in the document.
  2. In the Flash Button Properties dialog box, enter 'Namo Homepage' in the Text text box.
  3. Set Font to 'Verdana', Size to '80'.
  4. Click OK.


Modifying the link of a Flash Button

You can modify properties of the link, such as URL and Target frame, applied to a Flash Button.

  1. Double-click the Flash Button inserted in the document.
  2. The Flash Button Properties dialog box appears.
  3. Re-enter the file path or URL hyperlinked to the Flash Button in the Link text box under Hyperlink.
  4. Re-specify the target frame properties from the Target drop-down menu.
  5. Click OK.

Example

  1. Double-click the Flash Button inserted in the document.
  2. The Flash Button Properties dialog box appears.
  3. Enter 'http://www.namo.com' in the Link text box under Hyperlink.
  4. Set Target to '_self'.
  5. Click OK.


Flash Button Properties dialog box

You can modify the properties of a Flash Button.

Preview window

Shows the selected Flash Button with the specified properties.

Text

  • Text
    Displays the text to be inserted in the Flash Button. You can enter the text you want in this text box.
  • Font
    Specifies the font and size of the text.
  • Size
    Specifies the size of the text.
  • Offset X/Y
    Specifies the distance between the button text and the button image. Enter a positive number in X to move the text to the right, a negative number to move the text to the left. Enter a positive number in Y to move the text upwards and a negative number to move the text downwards. By default, the X and Y value are '0', which makes the text positioned at the very center of the button image.

    Offset X/Y are always specified as relative values. In other words, these values are always displayed as '0', which means you should set the Offset values as relative values considering the current Offset specifications.

Hyperlink

  • Link
    Specifies the file path or URL hyperlinked to the Flash Button. Click Browse... to specify a document in the Open dialog box. When you are currently working with a site, click the Site... button and specify a document in the current site. You can also set a hyperlink to a document among currently open ones by clicking the Open Documents... button.
  • Target
    Specifies the frame properties of the linked document. Select the target frame from the drop-down list.

Appearance

  • Width/Height
    Specifies the width and height of the Flash Button.
  • Bg
    Specifies the background color of the Flash Button. You can set the background color using the Color Pop-up. Selecting the Transparent option makes the background color transparent. Applying the Transparent option takes precedence over the specified Bg color.
  • Align
    Specifies the horizontal alignment of the Flash Button
  • Transparent
    Check this option to make the background of the button transparent.

top


Tables in Web Documents

Tables in a Web document play two very important roles, as outlined below.

As a method to narrate information

A table is often used to narrate information. A timetable is a good example where a table is used for this purpose. The data organized in a table is easy to read and can be conveniently processed. The information contained in a table can be viewed in various ways by sorting, converting between text and table, or by using the Chart Wizard.

Sales Review

As a gridline for the document layout

The example below is from Namo Interactive's Web site. As you can see, the page uses a three-column layout. The gridlines of the table, which are used to create the table's layout, appear as dotted lines in the Edit window. However, they are not visible in a browser.

top


Various Types of Table

A table is essentially a box, usually divided into several cells or partitions called rows and columns. Each cell can contain text, images, or any other page element that a document can contain.

Various forms of table

One cell can itself be a table. You can split or merge cells in whichever way you like, and create a table that fits entirely within one cell of another table. Such a table is called a Child Table.

1 x 1 Table

3 x 3 Table

Table with split and merged cells

Table inserted into another table

Child table

Table Properties and Cell Properties

Table Properties are applied only to the table, Cell Properties to the cell and Row Properties to a table row.
Using those properties, you can edit the table in various forms.

Table Properties | Table size Table layout Cell padding Cell spacing Table borders Table background Table caption
Cell Properties | Cell size Cell alignment Cell borders Cell background
Row Properties | Row size Row alignment Row border color Row background color

top


Table Properties

Table properties refer to the various attributes that can be applied to a table. Using the Table tab of the Table Properties dialog box, you can modify the table in various ways.

Table Size

A table consists of rows and columns. You can specify how many columns and rows you want when you create a table by selecting the [Table > New Table...] menu command.

The table size is determined by the table's width and height. The width and height of the table can be specified in pixels, as a fixed size, or as a percentage of the browser window size.

    Table with width in 100 pixels

    Table with width in 200 pixels

Table Alignment (Position of a table)

The position of the table relative to the browser window can be specified. If you choose "Left (Floating)" or "Right (Floating)," text outside the table will wrap to the left or right of the table. The "default" is left alignment for most browsers.

Cell padding

The amount of space between the contents and the border on all sides of the cells can be specified in pixels. If not specified, most browsers use 1 as default.

    When the cell padding is set to 0

     | Test1 | Test2
A | 100 | 110
B | 120 | 130

    When the cell padding is set to 5

     | Test1 | Test2
A | 100 | 110
B | 120 | 130

Cell spacing

The amount of space between each cell, horizontally and vertically, can be specified in pixels. If not specified, most browsers use 2 as default.

    When the cell spacing is set to 0

     | Test1 | Test2
A | 100 | 110
B | 120 | 130

    When the cell spacing is set to 5

     | Test1 | Test2
A | 100 | 110
B | 120 | 130

Table caption

The table caption can be used to add a title for the table, as in the examples below. The position of the caption can be specified to 'Top', 'Bottom', 'Left' or 'Right'.

    Report card
 | Test1 | Test2
A | 100 | 110
B | 120 | 130

    Report card
 | Test1 | Test2
A | 100 | 110
B | 120 | 130

Table borders

By selecting the type, thickness, and color of the table borders, the table can be modified in various ways.

    When the border thickness is set to 1

     | Test1 | Test2
A | 100 | 110
B | 120 | 130

    When the border thickness is set to 3

     | Test1 | Test2
A | 100 | 110
B | 120 | 130

Table background

A color or image file can also be selected for the table background.

    When a background color is selected

     | Test1 | Test2
A | 100 | 110
B | 120 | 130

    When an image file is used as a background image

     | Test1 | Test2
A | 100 | 110
B | 120 | 130

    top


Cell Properties

Cell Properties refer to the various attributes that can be applied to the cell. Using the Cell tab of the Table Properties dialog box, you can modify the table in various forms.

Cell size

The cell size can be specified by the width and height of the cell in pixels or as a percentage of the table size. If these are not specified, browsers will automatically adjust the size of the cell to fit the available space.

    20%

    30%

    50%

Cell alignment

You can specify the horizontal and vertical alignment of the cell contents. The default horizontal alignment is left; the default vertical alignment is middle.
    A1 | A2 | A3
A4 | A5 | A6
A7 | A8 | A9

    A1 : Horizontal alignment (Left), Vertical alignment (Top)

    A5 : Horizontal alignment (Center), Vertical alignment (Middle)

    A9 : Horizontal alignment (Right), Vertical alignment (Bottom)

Cell borders

The color of the cell's inside borders can be specified selectively.
By using the CSS Style borders, the cell borders can be modified in various ways.

     | Test1 | Test2
A | 100 | 110
B | 120 | 130

Cell background

You can choose a color or use an image file for the cell background.
If both the table background color and the cell background color are specified, the cell background color takes precedence.

    When a background color is selected:

     | Test1 | Test2
A | 100 | 110
B | 120 | 130

    When an image file is used as a background image:

     | Test1 | Test2
A | 100 | 110
B | 120 | 130

    top


Row Properties

Row properties refer to properties applied only to specific rows. You can specify the properties of a row using the Row tab in the Table Inspector or the Row tab in the Table Properties dialog box.

Size

You can specify the height of a row in pixels or as a percentage.

Formatting

You can set the horizontal and vertical alignment of a row. As default, a row is aligned to the horizontal left and vertical middle.

Borders

You can apply a specific border color to a row. Using CSS styles lets you apply various properties, such as cell border thickness or type.

Background

You can apply a background color to a row. If you have applied background color to the entire table, the row background color, and cell background color, the cell background takes precedence, and then the row color, and table color, in turn.


Working with Tables in Namo WebEditor

When working with tables in Namo WebEditor, it is more convenient to use the Table Inspector.

Table Inspector

The Table Inspector is made up of frequently used dialog box items and related buttons, and is activated when you select or place the mouse cursor inside a table.

Table Toolbar

The Table Toolbar provides shortcuts for several commonly used functions related to tables. To show the Table Toolbar, select the [View > Toolbars > Table] menu command.

Description for each of the tool buttons on the Table Toolbar

Escape Table Drawing Mode | Click to escape from the table drawing mode.
Table Pencil | Click to draw a table.
Table Eraser | Click to erase parts of a table.
Table Properties | Click to change the table properties.
Cell Properties | Click to change the cell properties.
Split Cell | Click to split a cell horizontally/vertically.
Merge Cells | Click to merge two or more cells.
Insert Rows/Columns | Click to insert rows or columns to the table.
Delete Rows/Columns | Click to delete rows or columns from the table.
Cell Borders | Click to change the cell border attributes.
Change Cell Color | Click to select or change a color for the cell background.
Convert Table to Text | Click to convert table contents to plain text, removing the table
Sort Table | Click to sort the contents of the table.
Create Chart | Click to create a chart with the contents of the table.

By dragging and docking the Table Toolbar anywhere outside the Edit window, it will show whenever the program starts, just like the Standard Toolbar.

Show/Hide Table Gridlines

If you click Show/Hide Table Gridlines [image] on the Standard Toolbar (or select the [View > Marks > Table Gridlines] menu command), a table with '0' border thickness will appear with gray dotted lines in the Edit window. If the Current Table ([View > Marks > Current Table]) option is also selected, the blue outline will appear as the table's outside border along with the gray dotted lines. To hide the blue outline, showing only the gray dotted lines, deselect Current Table option while leaving the Table Gridlines option selected. To show only the blue outline, select Current Table and deselect Table Gridlines. If you deselect both options, none will appear in the Edit window.

The Current Table option is selected by default.

Current Table

If you select Current Table by selecting the [View > Marks > Current Table] menu command, the table containing the cursor will appear with a blue outline as the table's outside border. To hide the blue outline, showing only the gray dotted lines, deselect the Current Table option while leaving the Table Gridlines option selected. To show only the blue outline, select Current Table and deselect Table Gridlines. If you deselect both options, none will appear in the Edit window.

The Current Table option is selected by default.

Table Style

You can save various styles of table for later use. You can select and apply the ready-made table style to any table inserted in a Web document. To apply a table style, place the cursor inside the table and open the Resource Manager by selecting the [Window > Resource Manager...] menu command. In the Resource Manager window, click the Table Style tab, choose the table style you want, and click Apply.

Cell size pop-up description

If you drag a cell border to modify the cell size, a pop-up description appears showing the size of the cell that is being modified. The pop-up description shows the size of a cell to the left of borderline being dragged in 'pixel(%)'.

top


Creating a table

You can create a table rapidly using the Table Toolbar. You can create various types of tables by specifying horizontal/vertical border properties, background image and color, etc.

Creating a table using mouse

  1. Click Create Table [image] on the Standard Toolbar.
  2. Click and drag on the miniature table that appears below Create Table [image] to select the number of rows and columns you wish to have in your table. The rows and columns of the table to be created is displayed in the form of number of rows x number of columns (e.g. 3 X 4) at the bottom.
  3. Click again when the desired table size and shape is blocked in the blue area.

To cancel creating the table, click again on Create Table [image] .

Creating a detailed table using Table Properties dialog box

  1. Select the [Table > New Table...] menu command.
  2. Specify the size of the table you wish to create in the Table tab of the Table Properties dialog box.
  3. Specify the layout, borders and/or background properties of the table and click OK.

Example

  1. Click Create Table [image] on the Standard Toolbar.
  2. To create a 3 x 3 table, drag the mouse-pointer to select the rows and columns from the miniature table as below and click.

  3. The new table will appear in the full width of the Edit window as below.

top


Drawing a table

You can create a table, as you draw it with a pencil, using the Table Toolbar. Using Draw Table command lets you create a table with its cell numbers undefined . You can also edit an existing table using Draw Table function.

You can draw a table in freehand by using the Table Toolbar.

  1. Select the [Table > Draw Table] menu command or click Table Pencil [image] on the Table Toolbar.
  2. Click and drag anywhere in the Edit window to create the table's outline.
  3. Click and drag inside the table outline to draw row and column borders, if necessary.

To escape from the Table Pencil mode, click Escape Table Drawing Mode [image] on the Table Toolbar or press the <Esc> key.

Example

  1. Click Table Pencil [image] on the Table Toolbar.
  2. The mouse-pointer appears as a pencil [image].
  3. Click and drag anywhere in the Edit window to create the table's outline.

  4. Click and drag inside the table outline to draw row and column borders.

  5. Click and drag inside the cell outline to divide it as necessary.

top


Creating a child table

You can insert a table within an existing table. In this case, the table inserted is called 'child table'. You can create a child table by inserting a new table or copying and pasting a part of an existing table inside a certain cell.

Creating a new child table

  1. Place the cursor within the cell where the child table will be inserted.
  2. Select the [Table > New table...] menu command.
  3. Specify the Size, Layout, Borders and Background attributes of the table in the Table tab of the Table Properties dialog box.

You can also create a new child table by clicking Create Table [image] on the Standard Toolbar, or clicking Table Pencil [image] on the Table Toolbar.

Pasting as a child table

  1. Select the block of cells.
  2. Click Copy [image] on the Standard Toolbar or press the shortcut key <Ctrl + C>.
  3. Click inside the cell where the child table is to be inserted.
  4. Click Paste [image] on the Standard Toolbar or press the shortcut key <Ctrl + V>.
  5. In the Paste Table dialog box, choose Insert as a child table and click OK.

Example

  1. Place the cursor inside the cell where the child table is to be inserted.

  2. Click Create Table [image] on the Standard Toolbar
  3. Drag the mouse over the miniature table to create 1 X 2 table blocks and click to select.
  4. The specified table is inserted as a child table as below.

top


Selecting cells

You can select one or multiple cells to modify the cell properties. You can easily select multiple cells using <Ctrl> or <Shift> key.

Selecting one cell

  1. Place the cursor within the cell.
  2. Select the [Table > Select > Current Cell] menu command or select {Select Cell} in the shortcut menu.

Selecting multiple cells

  1. Select one cell.
  2. Select other cells while holding down the <Shift> key and all cells in-between will be selected.

To select several cells that are not next to each other or not in block, click inside each cell while holding down the <Ctrl> key.

To select adjacent cells or a continuous block of cells, click-hold inside the first cell and drag the mouse-pointer to the last desired cell.

Example

  1. Place the cursor inside the first cell.

  2. Click inside the second last cell while holding down the <Shift> key.

  3. Select the first cell on the second row while holding down the <Ctrl> key.

  4. To deselect one of the selected cells, click inside a cell while holding down the <Ctrl> key.

top


Selecting a row or column

You can select a specific row or column in a table and modify its properties. There are several ways to select a row or column.

  1. Place the cursor inside the cell.
  2. Select the [Table > Select > Current Row] or [Table > Select > Current Column] menu command.

Place the mouse-pointer at the left edge of the row. While the mouse-pointer appears as a small rightward-pointing arrow [image], click once to select an entire row.

Place the mouse-pointer at the top edge of the column. While the mouse-pointer appears as a small downward-pointing arrow [image], click once to select an entire column.

You can also click and drag to select multiple adjacent rows or columns by selecting the first row or column, then selecting additional rows or columns while holding down the <Ctrl> key.

You can also select an entire row or column by clicking inside the first cell(the top left cell) and dragging it to the last cell(the bottom right cell) in the row or column.

Example

  1. To select a column, place the mouse-pointer at the top edge of the column you wish to select.

  2. Click to select the column when the arrow appears.

top


Selecting a table

You can select a whole table and modify its properties.

  1. Place the cursor anywhere within the table you wish to select.
  2. The blue outline defining the table will appear.
  3. Select the [Table > Select > Table] menu command or choose {Select Table} in the shortcut menu.

You can select the table by placing the cursor inside the table and pressing the shortcut key <Alt + Shift + T>.

You can also select the table by clicking the first cell and dragging it to the last cell at the bottom right of the table.

Example

  1. Place the cursor inside the table.

  2. Press the shortcut key <Alt + Shift + T>.


Aligning table/row/cells

You can align a table to the left, right, center of a document. You can also align contents in a cell.

Align table

  1. Place the cursor inside the table you wish to align.
  2. Select one of the following two methods.
  • Select alignment of a table from Align drop-down menu of the Table Inspector.
  • Select the [Table > Table Properties...] menu command, or click Table Properties [image] on the Table Toolbar. In the Table Properties dialog box, change the Alignment and click OK.

Align contents of the cell

You can align the contents of a cell by placing the cursor inside the cell. You can also select multiple cells for alignment.

  1. Place the cursor inside the cell containing the contents you wish to align.
  2. Select one of the following two methods.
  • Click the Cell tab of Table Inspector and set the alignment of contents using horizontal/vertical alignment buttons.
  • Select the [Table > Cell Properties...] menu command or click Cell Properties [image] on the Table Toolbar. In the Cell tab of the Table Properties dialog box, change the Horizontal and/or Vertical alignment and click OK.

Align contents of a row

  1. Place the cursor inside the row whose contents should be aligned.
  2. Select one of the following two methods.
  • Click the Row tab of Table Inspector and set the alignment of contents using horizontal/vertical alignment icons.
  • Select the [Table > Row Properties...] menu command. Specify the Vertical/Horizontal alignment in the Row tab of Table Properties dialog box and click OK.

The contents of the table can be aligned simply by clicking Align Left [image] , Align Center [image] , or Align Right [image] on the Formatting Toolbar.

Example

  1. Select the cells containing the contents you wish to align.

  2. Click the Cell tab of Table Inspector or click Cell Properties [image] on the Table Toolbar.
  3. Select [image] and [image] so that the contents should be aligned to the vertical middle and horizontal center.

    4. top


Specifying the height of a row

You can specify the height of a specific row in a table.
  1. Place the cursor anywhere in the row whose height should be adjusted.
  2. Select one of the following:
  • Specify Height in the Row tab in the Table Inspector.
  • Select the [Table > Row Properties...] menu command. At the Row tab in the Table Properties dialog box, specify Height and click OK.

Example

  1. Place the cursor anywhere in the row whose height should be adjusted.

  2. Set Height to '30' pixel in the Row tab of Table Inspector.


Inserting rows or columns

You can add a column or row to an existing table. You can also copy and paste columns or rows of a table to another table in case the number of columns or rows of two tables are equal.

Inserting a new line

  1. Place the cursor where you wish to insert rows or columns.
  2. Select one of the following methods.
  • Click Insert Rows/Columns [image] on the Table Toolbar or in the Table tab of the Table Inspector.
  • Select the [Table > Insert Rows or Columns...] menu command.
  3. In the Insert Rows or Columns dialog box, specify whether to insert columns or rows, the number you wish to insert, and whether to insert them before or after the row or column containing the cursor.

Copying and pasting parts of a table

You can cut or copy entire rows or columns and paste them before or after another row or column in the same table, or into a different table.

  1. Select the rows or columns to copy.
  2. Select {Copy} in the shortcut menu or press the shortcut key <Ctrl+C>.
  3. Place the cursor where you wish to paste the copied rows or columns.
  4. Select {Paste} in the shortcut menu or press the shortcut key <Ctrl+V>.
  5. In the Paste Table dialog box, specify the manner of inserting the copied rows or columns by selecting relevant options and click OK.

Example

  1. To insert a row under the first row, place the cursor anywhere in the first row.

  2. Click Insert Rows/Columns [image] in the Table tab of Table Inspector.
  3. In the Insert Rows or Columns dialog box, select Insert rows and specify 3 for the Number of rows, and select Below the current row for the Insert position.
  4. Click OK and 3 rows will be inserted to the table as below.

top


Deleting rows or columns

You can delete rows or columns of a table.

  1. Place the cursor inside the cell you wish to delete.
  2. Select the [Table > Delete Rows or Columns...] menu command.
  3. In the Delete Row or Columns dialog box, first specify whether to delete rows or columns. Then specify the number to delete, and whether to delete them before or after the row or column where the cursor is currently located.

After selecting the relevant rows or columns, press the <Del> key to delete the selected area, or press the shortcut key <Ctrl + Shift + Y> to delete only the contents of the selected area.

Example

  1. Select the area you wish to delete by dragging the mouse-pointer.

  2. Press the <Del> key.


Deleting a table

You can select and delete an entire table or remove the borders inside a table using the Table Toolbar.

Deleting the entire table

  1. Place the cursor anywhere inside the table to be deleted.
  2. Select the [Table > Select > Table] menu command or choose {Select Table} in the shortcut menu.
  3. Press the <Del> key.

You can also delete the table by selecting the first cell(the top left cell) and dragging the mouse-pointer over the entire table, and pressing the <Del> key.

Deleting the table border

  1. Click the Table Eraser [image] on the Table Toolbar or in the Table tab of the Table Inspector. (To display the Table Toolbar, select the [View > Toolbars > Table] menu command.
  2. The mouse-pointer turns into an eraser [image].
  3. Click-hold next to the cell border you wish to erase, then drag the eraser across the border.
  4. When the border turns red, release the mouse button to remove the border.

To escape from the Table Eraser mode, click Escape Table Drawing Mode [image] on the Table Toolbar or in the Table tab of the Table Inspector, or press the <Esc> key.

Example

  1. Place the cursor anywhere within the table you wish to delete.

  2. Select the table by pressing the shortcut key <Alt + Shift + T>.

  3. Press the <Del> key.

top


Splitting cell(s)

You can divide a cell into multiple cells.

Splitting cells

  1. Select the cells to be split.
  2. Select one of the following methods:
  • Select the [Table > Split Cell...] menu command.
  • Click Split Cell [image] on the Table Toolbar or in the Cell tab of the Table Inspector.
  3. In the Split Cell dialog box, specify whether to split the cells into rows or columns and determine the number of rows or columns to split each cell into, and click OK.

Splitting cells using the Table Pencil

  1. Place the cursor anywhere within the table.
  2. Select one of the following methods.
  • Click Table Pencil [image] on the Table Toolbar or in the Table tab of Table Inspector.
  • Select the [Table > Draw Table] menu command.
  3. When the mouse appears as a pencil [image] draw a line inside the cell borders to split the cell.

Example

  1. Place the cursor inside the cell you wish to split.

  2. Click Split Cell [image] in the Cell tab of Table Inspector.
  3. In the Split Cell dialog box, select Split into rows and enter '3' for the Number of rows or columns, and click OK. The cell is split as below.

top


Merging cells

You can merge adjacent cells into one cell. Merge Cells does not get activated when you have selected cells which are not adjacent.

Merging cells

  1. Select 2 or more cells to be merged.
  2. Select one of the following methods.
  • Click Merge Cells [image] in the Cell tab of the Table Inspector.
  • Select the [Table > Merge Cells] menu command.

It is not possible to merge a group of cells that do not make up a rectangular block.

Example

  1. Select cells to be merged.

  2. Click Merge Cells [image] in the Cell tab of the Table Inspector.
  3. The selected cells are merged into one cell.


Changing the table/cell borders

You can apply various effects to a table by modifying table and cell border properties, such as border thickness or color. You can apply three-dimensional effect to a table by setting different border colors to thin and thick borders.

Table borders

  1. Place the cursor anywhere inside the table.
  2. Select one of the following methods.
  • Click one of Normal/Thin/Thick/Hide Borders icon in the Table tab of Table Inspector.
  • Select an option from the [Table > Borders > Normal/Thin/Thick/Hide] menu commands.

When Hide is selected, borders become invisible in the browser. However, they will be appear as dotted lines in the Edit window.

Changing the table border properties

  1. Place the cursor inside the table.
  2. Select one of the following methods.
  • Specify the thickness and color of table borders in the Table tab of Table Inspector.
  • Select the [Table > Table Properties...] menu command or click Table Properties [image] on the Table Toolbar. Specify Type, Thickness, and Color for Borders in the Table properties dialog box and click OK.

You can change the colors of cell borders by choosing a color for Borders in the Cell properties dialog box.

CSS style borders

Cell borders can be edited in various ways using CSS-style.

  1. Select which cell borders to modify.
  2. Click Cell borders [image] on the Table Toolbar or select the [Table > Borders > Cell borders...] menu command.
  3. When the dialog box appears asking whether to change the borders to CSS-style borders, click Yes.
  4. Specify Borders, Style, Color, and Thickness in the Border Settings dialog box and click OK.

Example

  1. Place the cursor inside the table to modify.

  2. Specify Cell spacing as 0, and Thickness as 2 in the Table tab of Table Inspector.

  3. Click the Color Picker Pop-up icon [image] in the Table tab of the Table Inspector. Choose a light blue from Color Picker Pop-up.
    For Netscape, specify Dark borders, Light borders in the Table tab of the Table Properties dialog box.

See also

top


Resizing the table

You can easily resize a table by clicking the table border and dragging it to the point you want. You can also resize a table by specifying width and height of the table directly in the Table tab of the Table Properties dialog box.

Resizing the table by dragging

  1. Place the mouse-pointer on the right or bottom border of the table.
  2. When an arrow appears, click and drag the border. A pop-up appears showing the size of the cell being dragged in 'pixel(%)'.
  3. To resize an entire table while maintaining the relative sizes of all rows and columns, click and drag while holding down the <Ctrl> key.

Resizing the table by entering the values

  1. Place the cursor anywhere within the table.
  2. Select one of the following methods.
  • Specify the value for Width and Height in either pixels or as a percentage in the Table tab of Table Inspector and press <Enter>.
  • Select the [Table > Table Properties...] menu command or click Table Properties [image] on the Table Toolbar. Specify values for Width and Height in either pixels or as a percentage in the Table tab of the Table Properties dialog box and click OK.

You can specify the width and height of a table in pixel or in a percentage (%) of a browser window.

Example

  1. Place the mouse-pointer on the right border of the table.

  2. When an arrow appears, click and drag the border to the right while holding down the <Ctrl> key.

    (The size of each cells increases by the same ratio.)
  3. Again, click and drag the border to the right without holding down the <Ctrl> key.

    (Only the size of the cell containing the dragged border increases.)

top


Fixing the table size

If you insert a table and adjust your browser window, the table gets wider or narrower according to the browser size. You can fix a table size by setting a table size in pixel in the Table tab of the Table Properties dialog box.

Fixing the table size

  1. Place the cursor in the table whose size should be fixed.
  2. Select the [Table > Table Properties...] menu command or select {Table Properties..} in the shortcut menu or press a shortcut key <Ctrl + Shift + T>.
  3. In the Table tab of the Table Properties dialog box, check Width and Height and check pixel radio buttons.
  4. Enter the size you want and click OK.

  5. Check if the table size has been fixed by selecting the [View > View with Internet Explorer/Netscape] menu command and changing your browser window size.

Fixing a document size using a table

  1. Select the [Table > New Table...] menu command.
  2. In the Table tab of the Table Properties dialog box, enter 1 both in Rows and in Columns.

  3. In the Table tab of the Table Properties dialog box, check Width and Height. Enter the size you want and check pixel radio buttons.

  4. Set Thickness to '0' and click OK.

  5. Edit the document by inserting text or images in the table.
  6. Check if the document size has been fixed by selecting the [View > View with Internet Explorer/Netscape] menu command and changing your browser window size.

top


Setting the size of the cells

You can set the size of cells within a table. You can set cell properties , such as cell width or height, to default. You can also select multiple cells and make their height or width the same. Using Apply Visible Cell Attributes lets you recover the excessive reduction, expansion, and deletion of cells.

Apply Visible Cell Attributes

  1. Place the cursor anywhere inside the table.
  2. Select the [Table > Cell Size > Apply Visible Cell Attributes] menu command.

Clear All Width (or Height) Attributes

  1. Place the cursor anywhere inside the table.
  2. Select the [Table > Cell Size > Clear All Width Attributes] or [Table > Cell Size > Clear All Height Attributes] menu command.

Equalize Cell Width (or Height)

  1. Select at least two cells to equalize their widths (or heights).
  2. Select one of the following methods.
  • Click Equalize Cell Width [image] or Equalize Cell Height [image] in the Cell tab of the Table Inspector.
  • Select the [Table > Cell Size > Equalize Cell Width] or [Table > Cell Size > Equalize Cell Height] menu command.

Example

  1. Select cells to equalize the width.

  2. Click Equalize Cell Width [image] in the Cell tab of Table Inspector.

top


Inserting/Removing a caption

You can insert a caption, explaining contents of a table or dividing different tables, in a table. You can change the position of a caption or apply various formats to a caption.

Inserting a caption

You can add a title to the table by inserting a caption.

  1. Place the cursor anywhere within the table.
  2. Select the [Table > Caption > Insert Caption] menu command.
  3. Type the caption.

Changing the position of the caption

  1. Place the cursor inside the table where you wish the caption to be inserted.
  2. Select the [Table > Table Properties...] menu command or click Table Properties [image] on the Table Toolbar.
  3. In the Table tab of the Table Properties dialog box, select a location for the caption using the Table caption drop-down menu under Layout and click OK.

To delete a table caption, place the cursor anywhere inside the table and select the [Table > Caption > Delete Caption] menu command.

Example

  1. Place the cursor inside the table.

  2. Select the [Table > Caption > Insert Caption] menu command.

  3. Type the caption and change the Font, Font Size and Font Color.

top


Changing the background for the table/cell/row

You can apply background effect to an entire table, individual cells, or a table row. You can apply background color or image to a table or cell(s), or a table row. If you have applied the table background color, row background color, and cell background color at the same time, cell background will take the precedence, and then the row color, table color in turn.

Changing the background for the table

You can specify a background color or insert an image to use as a background image for the table.

  1. Place the cursor inside the table.
  2. Choose one of the following two methods.
  • Specify background image or background color in the Table tab of Table Inspector.
  • Select the [Table > Table properties...] menu command or click Table properties [image] on the Table Toolbar. Specify Color or Image in the Table tab of Table properties dialog box and click OK.

Changing the background for the cells

  1. Place the cursor inside the cell. To change the background of more than two cells, first select the cells.
  2. Choose one of the following three methods.
  • Specify background image or background color in the Cell tab of Table Inspector.
  • Select the [Table > Cell properties...] menu command or click Cell properties [image] on the Table Toolbar. Specify Color or Image in the Cell tab of the Table Properties dialog box and click OK.
  • To quickly change the background color of cells, first select the cells and click Change Cell Background Color [image] on the Table Toolbar. Specify the color you want in the Color Picker Pop-up.

When both cell and table background colors are specified, the cell background color will change first.

Changing the background for the table rows

  1. Place the cursor inside the cell.
  2. Choose one of the following methods.
  • Specify background color in the Row tab of Table Inspector.
  • To quickly change the background color of a row, first select the row and click Change Cell Background Color [image] on the Table Toolbar. Specify the color you want in the Color Picker Pop-up.
  • Select the [Table > Row Properties...] menu command. In the Row tab of the Table Properties dialog box, specify the Background Color.

Example

  1. Place the cursor anywhere within the table you wish to modify.

  2. Click Table tab in the Table Inspector. Click the Color Picker Pop-up icon [image] at Bg.
  3. Select the color you want from the Web-safe 216 colors.

  4. Select the cells whose background color you wish to change.

  5. Click Cell tab in the Table Inspector. Click the Color Picker Pop-up icon [image] at Bg.
  6. Select the color you want from the Color Picker Pop-up.

top


Copying and pasting attributes of the cell

You can copy and paste attributes of a cell to other cells in the same table or another table using the Copy Format menu.

  1. Place the cursor within the cell containing attributes you wish to copy.
  2. Select the [Edit > Copy Format...] menu command, or press the shortcut key <Shift + F2>.
  3. In the Copy Format dialog box, select the types of formatting attributes to copy and click OK. If you want to copy all the attributes of the cell, select All attributes at the bottom.
  4. Select the cell to which you wish to paste the copied format.
  5. Select the [Edit > Paste Format] menu command or press the shortcut key <F2>.
  6. The copied attributes will be applied.

In case you have copied the background color properties, the Paste Format dialog box sometimes appears asking the range of application.

Example

  1. To copy the background color of a cell, place the cursor within the cell containing the desired attributes.

  2. Press the shortcut key <Shift+F2>.
  3. Select Background color in the Copy Format dialog box and click OK.
  4. Select the cells where you wish to paste the copied background color attribute.

  5. Press the shortcut key <F2>.
  6. Select As cell background color in the Paste Format dialog box and click OK.

top


Deleting contents of the cells

You can delete the contents of the selected cells while leaving the table unchanged.

  1. Select the cells with contents you wish to delete by holding down the <Ctrl> key and clicking on each of the cells you wish to clear.
  2. Select the [Table > Delete Contents] menu command.
  3. Contents of the selected cells will be deleted.

After selecting the cells, press the shortcut key <Ctrl + Shift + Y> to quickly delete the contents.

Example

  1. Select the cells with contents you wish to delete.

  2. Press the shortcut key <Ctrl + Shift + Y>.

  3. Enter new content or copy and paste existing contents.


Splitting the table

You can split a table into two tables. Note that The rows below the row containing the insertion point will be split off into a new table.

Splitting a table

  1. Place the cursor at the point where you wish to split the table.
  2. Select the [Table > Utilities > Split Table] menu command.

The row right below the cursor will split into a new table. Therefore, place the cursor above the desired breaking point.

After selecting a row, you can drag it anywhere outside the table and release the mouse. It will then split and appear as a new table.

Example

  1. To split the table below into two tables, place the cursor in the second row.

  2. Select the [Table > Utilities > Split Table] menu command.
  3. The table splits into two tables and the blue outline defining the table will appear as below in the Edit window.


Merging tables

You can merge two different tables. To merge two tables, two tables should be adjacent and have the same number of horizontal cells.

Merging tables

  1. Place the cursor anywhere within the upper table.
  2. Select the [Table > Utilities > Merge Tables] menu command.

The blue outline defining the table in the Edit window lets you verify whether the tables have been merged into one.

Example

  1. Place the cursor inside the upper table.

  2. Select the [Table > Utilities > Merge Tables] menu command.
  3. The table containing the cursor will be merged into the table below, and the blue outline defining the table will appear around the new table as below.


Applying table styles

You can easily and rapidly modify table properties by applying built-in table styles to tables. You can also apply different cell properties or table properties even after you have applied a table style.
  1. Place the cursor inside a table to which you want to apply a table style.

  2. Select the [Table > Table Style...] menu command or [Window > Resource Manager...] menu command and click the Table Style tab.
  3. Take one of the following methods:
    • Select a category folder in the left list and click the table style you want in the right window. Click Apply.
    • Select a category folder in the left list and click the table style you want. Drag the table style over the table containing the cursor to which the table style should be applied. The mouse shape turns into a small grey rectangle with a '+' sign. Release the mouse button and select {Apply Table Style} in the shortcut menu.

     | Test 1 | Test 2 | Test 3
A | 4 | 3 | 6
B | 1 | 2 | 9
C | 5 | 7 | 8

    (Example of a table with the table style applied to it.)

    top


Transposing a table

You can transpose columns and rows in a table.
  1. Place the cursor inside the table.

  2. Select the [Table > Utilities > Transpose Table] menu command.


Converting text to table

You can convert character strings to a table in case the string is divided by relevant delimiters. Delimiters refer to a symbol by which a set of string is divided into each cell. Paragraph and <BR> tag, space, comma can be used as a delimiter. You can also specify other symbol as a delimiter. Selecting No delimiters (insert everything in one cell) creates a table containing all the selected data in one cell.

  1. Select the text to convert into a table.
  2. Select the [Table > Utilities > Convert Text to Table...] menu command.
  3. In the Convert Text to Table dialog box, specify the number of rows and columns for the new table under Table size.
  4. Choose a Delimiter and click OK.

Example

  1. Select the text to turn into a table.

  2. Select the [Table > Utilities > Convert Text to Table...] menu command.
  3. In the Convert Text to Table dialog box, select Spaces for Delimiter, and select or enter 3 for Columns.
  4. Click OK and the text will convert to a table as below.


Converting table to text

You can convert a table to text string.

  1. Place the cursor anywhere inside the table.
  2. Select the [Table > Utilities > Convert Table to Text] menu command.

Example

  1. Place the cursor anywhere within the table.

  2. Select the [Table > Utilities > Convert Table to Text] menu command.
  3. The contents of the table will convert to text as below.


Creating a chart

You can create a chart based on a table using the Chart Wizard.

  1. Place the cursor anywhere within the table.
  2. Select one of the following methods.
  • Click Create Chart [image] on the Table Toolbar.
  • Select the [Insert > Other > Chart...] menu command.
  3. When the Chart Wizard is activated, proceed with the steps provided.

Example

  1. Place the cursor inside the table.

  2. Click Create Chart [image] on the Table Toolbar.
  3. Select Column for Chart Type (Step 1 of 3) in the Chart Wizard dialog box and click Next.
  4. Select First row contains series names and First column contains category names for Series and categories in the Data Series (Step 2 of 3) and click Next.
  5. Type 'Sales Review' for Chart title, 'Country' for X-axis title, 'Total Sales' for Y-axis title in the Title (Step 3 of 3) and click Finish.
  6. Click and drag any of its resize handles to resize the chart in the Edit window.

  7. You can modify a number of options for each date series in a chart by double-clicking the chart.

You can change a chart into an image by clicking the chart and selecting {Image > Convert to Standard Image...} in the shortcut menu. In this case, the chart loses its editable properties.

top


Sorting tables

You can sort data within a table according to the column you have selected. However, you cannot sort data of a table created by merging cells because of the irregularities of the cells.

Sorting the contents of the table

1. Place the cursor anywhere inside the table you wish to sort.

2. Select one of the following methods.

  • Click Sort Table [image] on the Table Toolbar or in the Cell tab of Table Inspector.
  • Select the [Table > Utilities > Sort...] menu command.

3. In the Sort dialog box, specify the sort type and desired options, and click OK.

To sort only specified cells, select a part of the table you wish to sort and choose the Sort selected cells only option in the Sort dialog box.

Example

  1. Place the cursor inside the table.

  2. Click Sort Table [image] in the Cell tab of Table Inspector.
  3. To sort the table by using the column 'Test1' as the first sort key, choose Column 2 from the Sort by drop-down menu and select As number and Descending in the Sort dialog box.
  4. Because the first row is a title row, select Exclude the first selected row for the Options in the Sort dialog box and click OK. The table is sorted as below.

top


Importing spreadsheet into a table

You can import a Spreadsheet file as a table with Namo WebEditor.

  1. Select the [Insert > Other > Spreadsheet...] menu command.
  2. In the Spreadsheet dialog box, click Browse... under Source, select Excel file and click Open.
  3. Select the relevant option under Insertion method.
  4. Click OK.

Microsoft Excel must be installed on your computer in order to use this feature.

If you select Link to original spreadsheet, the table contents are automatically updated in the Edit window after the table is edited and the Excel document is closed.

Example

  1. Select the [Insert > Other > Spreadsheet...] menu command.
  2. In the Spreadsheet dialog box, click Browse... under Source, select Excel file, and click Open.

    (The original spreadsheet file to be imported.)
  3. Select Link to original spreadsheet under Insertion method, and click OK.
  4. The contents of the spreadsheet file will be inserted into a table in the Edit window.

  5. To edit the contents, select {Edit Spreadsheet...} in the shortcut menu.
  6. To apply the changes made to the original file, select {Update Spreadsheet Contents...} in the shortcut menu.

top


Table Inspector

Table tab

Cell tab

Row tab

The Table Inspector consists of three tabs; Table tab, Cell tab, and Row tab. The Table Inspector is activated when you select a table in the Edit window. You can check and modify the table properties directly in the Table Inspector without opening any other dialog box. Specify the relevant values in the Table Inspector and press <Enter> to move on to other items to apply the specified values to the selected table.

Table tab

  • Width
    Specifies the width of the table in pixels or as a percentage (%) of the browser window size. To fix the table width, specify the width in pixels.
  • Height
    Specifies the height of the table in pixels or as a percentage of the browser window size. To fix the table height, specify the height in pixels.
  • Spacing
    Specifies the amount of space (in pixels) between cells, horizontally and vertically. The bigger this value, the wider the spacing between borders becomes.
  • Padding
    Specifies the amount of space (in pixels) between the contents of each cell and the cell's borders on all sides. The bigger this value, the wider the spacing between borders and cell contents becomes.
  • Align
    Specifies the position of the table relative to the browser window. Click on an item from the drop-down menu to determine how the table should be aligned.
  • Background image
    Specifies an image file to use as a background image for the table. Click Browse... to locate an image file from the local hard drive.
  • Color
    Specifies the background color for a table. Select the Color Picker Pop-up icon [image] and specify the background color in the Color Picker Pop-up.

Cell tab

  • Width
    Specifies cell width in pixels or as a percentage of the table size.
  • Height
    Specifies cell height in pixels or as a percentage of the table size.
  • Header
    Select this check box to designate the cell as a header cell. Cell contents will appear bolded with centered horizontal alignment.
  • No Wrap
    Select this check box to ensure cell contents do not automatically start to appear on a new line when exceeding the cell border. The cell width will expand to fit cell contents.
  • Background color
    Specifies the background color of the cell.
  • Background image
    Specifies the path or URL to an image file to use as the cell's background image. Click Browse... to locate and select a file from the local hard drive.
  • Color
    Specifies the background color for a cell. Select the Color Picker Pop-up icon [image] and specify the background color in the Color Picker Pop-up.

Row tab

  • Height
    Specifies row height in pixels or as a percentage of the table size.
  • Bg
    Specifies the background color for a row by clicking Color Picker Pop-up icon. Click the Color Picker Pop-up icon [image] and specify the background color in the Color Picker Pop-up.

top


Table Properties dialog box - Table tab

[Table > New Table...], [Table > Table Properties...], {Table shortcut menu - Table Properties...}, <Ctrl + Shift + T>, Table Properties

Size

Layout

Borders

Background

Size

  • Rows
    Specifies the number of rows for a new table. (Use Delete rows or columns or Insert rows or columns to modify an existing table.)
  • Columns
    Specifies the number of columns for a new table. (Use Delete rows or columns or Insert rows or columns to modify an existing table.)
  • Width
    Specifies the width of the table in pixels or as a percentage of the browser window size. If not specified, the table width will automatically adjust to display as much of the contents as possible without exceeding the width of the browser window.
  • Height
    Specifies the height of the table in pixels or as a percentage of the browser window size. If not specified, the table height will automatically adjust to display as much of the contents as possible, creating a vertical scroll bar when expanding beyond the horizontal limitation of the browser window.

Layout

  • Alignment
    Specifies the position of the table relative to the browser window. Click on an item from the drop-down menu to determine how the table should be aligned.
    If you select 'Right (Floating)' or 'Left (Floating)', you can enter contents like text or images beside the table. Selecting 'Right', 'Left', 'Center' makes it impossible for you to enter any contents beside the table.
  • Table caption
    Specifies the location of the table's caption relative to the table. Available only if the table has a caption.
  • Cell padding
    Specifies the amount of space (in pixels) between the contents of each cell and the cell's borders on all sides. If not specified, most browsers use 1 as a default.
  • Cell spacing
    Specifies the amount of space (in pixels) between each cell, horizontally and vertically. If not specified, most browsers use 2 as a default.

Borders

  • Type
    Select the border type from the drop-down menu. You can choose from 'Normal, Thin, Thick, or Hide'.
    • Normal | Specifies the borders in the default style.
Thin | Specifies thin borders by setting Cell spacing to '0', Light border to 'white', and Dark border to 'black'.
Thick | Specifies thick borders by setting Cell spacing to '0', Light border to 'black', and Dark borders to 'black'.
Hide | Hides the borders by setting Border Thickness to '0'. Borders will appear as dotted lines only in the editing mode.
  • Thickness
    Sets the thickness of the table border (not the cell borders) in pixels. If not specified, Namo WebEditor use 1 as default.
  • Color
    Sets the color of the table border. If set to "Default", Internet Explorer will use the Light border and Dark border settings (see below), and Netscape Navigator will use light gray and dark gray.
  • Light border
    Sets the color of the table border on the top and left sides (only in Internet Explorer). If set to "Default", Internet Explorer will use the color specified in Color (see above).
  • Dark border
    Sets the color of the table border on the bottom and right sides (only in Internet Explorer). If set to "Default", Internet Explorer will use the color specified in Color (see above).

Background

  • Image
    Specifies the URL of an image file to use as a background image for the table. If the image is smaller than the table, it will be tiled to fill the table.

    • Click Browse... to select an image file on your local drive.

    Click Clip Art... to select an image from the Clip Art tab in the Resource Manager.

    Click Site... to select an image file saved in the current site (available only when working on a project).
  • Color
    Sets the background color of the table. Click Color Picker icon to select a color from the Color Picker dialog box.

Style...button
Click to open the Style dialog box, in which you can assign a CSS style to the table.

Click Apply to view the effect of your changes without closing the dialog box.

To hide a table that has '0' border thickness in the Edit window, click the Show/Hide Table Gridlines [image] on the Standard toolbar.

Many of the functions of this dialog box can be more easily performed using the Table toolbar.

top


Table Properties dialog box - Cell tab

[Table > Cell Properties...], {Table shortcut menu - Cell Properties...}, <Ctrl + Shift + L>, Cell Properties

Size

Formatting

Borders

Background

Size

  • Width
    Specifies cell width in pixels or as a percentage of the table size.
  • Height
    Specifies cell height in pixels or as a percentage of the table size.

Formatting

  • Horizontal alignment
    Specifies the horizontal alignment of the cell contents. Choose one among Left, Right, or Center.
    • Left | Center | Right
Namo WebEditor | Namo WebEditor | Namo WebEditor
  • Vertical alignment
    Specifies the vertical alignment of the cell contents. Choose one among Top, Middle, Bottom, or Baseline.
    • Top | Middle | Bottom | Baseline
Namo WebEditor | Namo WebEditor | Namo WebEditor | Namo WebEditor
  • Header cell
    Select this check box to designate the cell as a header cell. Cell contents will appear bolded with centered horizontal alignment.
  • No wrap
    Select this check box to ensure cell contents do not automatically start to appear on a new line when exceeding the cell border. The cell width will expand to fit cell contents.

Borders

  • Color
    Specifies the color of the cell's inner borders. This setting is ignored if Light border and Dark border are both set to a color other than the default.
    In Netscape, the specified colors for Light border and Dark border will be used.
  • Light border
    Specifies the color for the cell's right and bottom inside borders.
  • Dark border
    Specifies the color for the cell's left and top inside borders.

Background

  • Image
    Specifies the path or URL to an image file for use as the cell's background image.

    • Click Browse... to select an image file on your local drive.

    Click Clip Art... to select an image from the Clip Art tab in the Resource Manager.

    Click Site... to select an image file saved in the current site (available only when working on a project).
  • Color
    Select the background color of a cell in the Color Picker Pop-up.

Style... button

Opens the Style dialog box, allowing you to edit the CSS attributes of the table.

By clicking the Apply button, modifications can be viewed without closing the dialog box.

top


Table Properties dialog box - Row tab

[Table > Row Properties...]

Size

Formatting

Borders

Background

Size

  • Height
    Specifies row height in pixels or as a percentage of the table size.

Formatting

  • Horizontal alignment
    Specifies the horizontal alignment of a row. You can select one among Left, Right, and Center.
  • Vertical alignment
    Specifies the vertical alignment of a row. You can select one among Top, Middle, Bottom, and Baseline.

Borders

  • Color
    Specifies the border color of a row. Specifying Light and Dark border takes precedence over specified Color. In Netscape, Light and Dark border are used for the border color.
  • Light border
    Specifies the color for the cell's right and bottom inside borders.
  • Dark border
    Specifies the color for the cell's left and top inside borders.

Background

Select the background color of a row in the Color Picker Pop-up.

Style... button

Opens the Style dialog box, allowing you to edit the CSS attributes of the row.

top


Border Settings dialog box

[Table > Borders > Cell Borders...], {Table shortcut menu - Table > Borders...}, Cell Borders
You can change the borders of a table or a selected group of cells.
  • Borders
    Specifies which cell borders to modify. Click to select Inside, Outside, All, Columns, Rows, Left, Right, Top, or Bottom.
  • Style
    Selects a border style from the drop-down menu.
    • None | Selected borders will not appear.
Dotted | Selected borders appear as dotted lines.
Dashed | Selected borders appear as dashed lines.
Solid | Selected borders appear as solid lines.
Double | Selected borders appear as double lines.
Groove | Selected borders appear in a frame brightened from the bottom right.
Ridge | Selected borders appear in a frame brightened from the top left.
Inset | Selected borders appear in a frame extending inward.
Outset | Selected borders appear in a raised frame.

  • Color
    Selects a border color from the Color Picker Pop-up.
  • Thickness
    Specifies the thickness of selected borders and a unit of measurement from the drop-down menu.
  • None button
    Erases borders of selected cells, as specified in Borders. For example, in case you have selected Inside under Borders and clicked the None button, the borders inside the table become invisible in the browser window.

The CSS-style borders specified with the Border Settings dialog box are compatible only with Internet Explorer 5.0 and above, and Netscape 6.0 and above.
By clicking the Apply button, modifications can be viewed without closing the dialog box.

top


Insert Rows or Columns dialog box

[Table > Insert Rows or Columns...], {Table shortcut menu - Table > Insert Rows or Columns...}, Insert Rows/Columns
Inserts rows or columns into the current table.
  • Insert rows/Insert columns
    Click a radio button to specify whether to insert rows or columns. The small preview on the right reflects your current selection.
  • Number of rows/columns
    Enter the number of rows or columns to insert.

If you click Insert columns, the number option and Insert position options below automatically switches to the relevant items. In case you choose Insert rows, the number option switches to Number of rows and the Insert position options switch to Above/Below the current row.

Insert position

  • Above the current row/Below the current row
    Inserts rows above or below the row where the cursor is currently located.
  • Left side of the current column/Right side of the current column
    Inserts columns before or after the column where the cursor is currently located.


Delete Rows or Columns dialog box

[Table > Delete Rows or Columns...], {Table shortcut menu - Table > Delete Rows or Columns...}, Delete Rows/Columns
Deletes a specified number of rows or columns from the current table.
  • Delete rows
    Click the radio button to specify deletion of rows. Deletes the row where the cursor is currently located. The small preview on the right reflects your current selection.
  • Delete columns
    Click the radio button to specify deletion of columns. Deletes the column where the cursor is currently located. The small preview on the right reflects your current selection.
  • Number of rows or columns
    Deletes the specified number of rows or columns, in a downward or rightward manner from the current cursor location. Enter the number of columns or rows to delete.


Paste Table dialog box

[Copy table - Edit > Paste], <Ctrl + V>
You can specify how to paste the previously copied table or cells into the current table.
  • Insert as a child table
    Pastes the copied table or cells into the current cell as a "child" table (a table wholly contained in a single cell of another table).
  • Insert into the left column
    Inserts the copied table or cells before the current column. Available only when the vertical number of pasted cells matches that of the current table.
  • Insert into the right column
    Inserts the copied table or cells after the current column. Available only when the vertical number of pasted cells matches that of the current table.
  • Insert into the row above
    Inserts the copied table or cells above the current row. Available only when the horizontal number of pasted cells matches that of the current table.
  • Insert into the row below
    Inserts the copied table or cells below the current row. Available only when the horizontal number of pasted cells matches that of the current table.
  • Paste contents only
    Pastes only the contents of the copied table or cells into the same number of cells, starting at the current cell. The current contents will be overwritten.
  • Number of copies to insert or paste
    Specifies the number of copies of the cells to insert into the current table. Available only when pasting an entire row or column.

Depending on the type of copied cells or tables, only the radio buttons of the possible options will appear active.


Split Cell dialog box

[Table > Split Cell...], {Table shortcut menu Table > Split Cell...}, <Ctrl + Shift + F8>, Split Cell
Splits the selected cell(s) in a table into two more cells.
  • Split into rows
    Splits the selected cells horizontally, into rows. The small preview on the right reflects the current selection.
  • Split into columns
    Splits the selected cells vertically, into columns. The small preview on the right reflects the current selection.
  • Number of rows or columns
    Determines the resulting number of rows or columns to which the selected cells should be split. Enter the number of desired rows or columns.

Number of rows or columns correspond to each column or row. For example, if you have selected 2 columns and set Number of rows or columns to 2, the total columns will be 8.


Sort dialog box

[Table > Utilities > Sort...], Sort Table

Sort by / then by / then by

Options

Sorts a table or selected cells of a table using criteria you specify.

Sort by / then by / then by

  1. Check Sort left to right in the Options area to sort the table by rows rather than columns.
  2. Under Sort by, select the column or row to use as the primary sort criterion.
  3. Specify how to interpret the cell contents by selecting either As string or As number. To sort by numerical value, choose As number. Selecting As string will sort the table according to ASCII values. For instance, 0987 will appear before 125 even though its numerical value is greater.
  4. Select the sort order by clicking Ascending or Descending.
  5. If you wish to specify additional sort criteria, select them under then by.

Options

  • Sort left to right
    Sorts by rows rather than columns. Not available if the table has only one column or if a single column was selected and sorted with Sort selected cells only. This option is forced on if the table has only a single row, or if you selected a single row and checked Sort selected cells only.
  • Sort selected cells only
    Sorts only selected cells rather than the entire table. Available only when some cells have been selected. Checking this option forces the Sort contents only option.
  • Sort contents only
    Sorts only the contents of the cells, leaving cell attributes such as background color unchanged.
  • Exclude the first selected row
    Excludes the first row of the table or selection from sorting.
  • Exclude the last selected row
    Excludes the last row of the table or selection from sorting, leaving the cell attributes such as background color unchanged.

top


Convert Text to Table dialog box

[Table > Utilities > Convert Text to Table...],

Table Size

Delimiter

Converts the selected paragraph(s) to a table.

Table Size

  • Rows
    Automatically calculates the number of rows when the number of desired columns is specified.
  • Columns
    Specifies the number of columns that should be in a table.

Delimiter

  • Paragraph breaks
    Divides the contents by paragraph.
  • Line breaks and paragraph breaks
    Divides the contents by line and paragraph.
  • Spaces
    Divides the contents by spaces, and allows you to specify how many continuous spaces should be treated as the delimiter.
  • Commas
    Divides the contents by commas.
  • No delimiters
    Inserts selected contents into a single cell.
  • Other:
    Specifies a unique delimiter, and allows you to input a delimiter symbol of your choice in the text box.

For example, you can use <BR> tag as a delimiter. <BR> is a HTML tag for changing lines. You can display this tag as [image] in the Edit window by clicking Show/Hide Paragraph Marks [image] on the Standard Toolbar.

top


Spreadsheet dialog box

[Insert > Other > Spreadsheet...],

Source

Insertion method

Imports a table from a Microsoft Excel spreadsheet and inserts it into the current document, converting it into a standard HTML table with an optional link to the original spreadsheet.

Source

  • Excel file
    Select this option to use an existing Excel file. Type the path or URL to the file, or click Browse... to locate and select an Excel file.
  • Current table in the document
    Select this option to send the current table to Microsoft Excel, then import it again as an Excel table.

Insertion method

  • Link to original spreadsheet
    Converts the Excel table into an HTML table and inserts a hidden link to the original spreadsheet. The table can now be edited in Microsoft Excel by right-clicking it and selecting Edit Spreadsheet... from the shortcut menu. The contents are automatically updated in the Edit window when edited and the Excel document is closed. If you open and edit the original spreadsheet without using the Edit Spreadsheet... command, you can select Update Spreadsheet Contents... to update the table in the Edit window.
  • Embed into HTML document
    Converts the Excel table into an HTML table and embeds a hidden copy of the original Excel table in the HTML document. This is similar to linking to an existing Excel file, but allows editing in Excel even if original Excel file is moved, renamed or deleted.
  • Static import
    Converts the Excel table into an HTML table without linking to or embedding a copy of the original Excel file. The table is not editable in Excel.

Microsoft Excel must be installed on your computer in order to use this feature.

If the location or filename of the original Excel file changes, the link will be broken and it will not be possible to edit the imported table with Microsoft Excel.

top


What is a Layout Table?

Table and layout table

Tables are used not only to show a series of data but also to design layouts of Web documents. However, designing a layout using tables demands a good understanding of tables and table tags, and requires a lot of time and effort. However, it still causes difficulties when designing complex layouts. A Layout table is a type of table, designed for designing layouts using tables. A layout table uses table tags in the HTML source code but it works more like layers; you can freely insert or move an object to any position within the layout table by the drag and drop method.

Layout table

A layout table is a rectangular area in which you can draw boxes called layout cells. You can draw as many layout cells as desired until the whole area is filled. You can move, resize, and remove any layout cells you wish. For easier control, you can use the Snap option to resize or change the position of a layout cell according to the grid. The Snap option attracts nearby objects to the grid. Grids are visible only in the Edit window.

You can insert text, table, or images in a layout cell, as you do in an ordinary cell of a table. You can also apply a background image or background color, as well as specify cell margins or borders of a layout cell. Objects inserted in layout cells can also be easily aligned.

A layout table consists of HTML elements such as TR, TD, Colspan, Rowspan, all of which constitute an ordinary table. Accordingly, a layout table can be converted into a table, and a layout cell into a cell. Conversely, you can convert a table into a layout table.

You should take the following matters into consideration when working with a layout table.

  • You cannot drag an object out of the layout table area.
  • You cannot overlap multiple objects in a layout table.
  • If you place an object on the border of a layout table, the size of the layout table will be adjusted to such an extent that the layout table can include the inserted object.
  • The Snap function applied to a document is not applied to the content of a layout table. You should select the Snap option in the Layout Table Properties dialog box to apply the Snap function to the contents in a layout table.
  • If you activate Snap by selecting the Snap option in the Layout Table Properties dialog box, an object inside the layout table moves by the grid.

top


Working with Layout Tables in Namo WebEditor

Layout table and HTML tags

You can insert a layout table using the Layout Table Properties dialog box or Draw Layout Table [image] . Inserting a layout table creates the following HTML tags.

e.g., <table border="0" cellpadding="0" cellspacing="0" width="101" height="101" namo_layoutbox="10,1,1,10,1,1">....</table>

A layout table, created in the Edit window, is coded as table in the HTML source. A layout cell inside a layout table is coded as a cell. Accordingly, the properties of a layout table or a layout cell are equivalent to those of a table or a cell.

Layout Table Properties dialog box

Double-click a layout table to open the Layout Table Properties dialog box. You can specify the properties of a layout box, such as its size, alignment, background image or color, and grid settings. In addition, you can specify grid settings using the Snap and Visible options so that you can resize or change the position of a layout cell more effectively.

Layout Table and Grid

You can specify the properties of the grid, displayed in a layout table, in the Layout Table Properties dialog box.

  • Horizontal/Vertical: You can specify the spacing of horizontal and vertical gridlines.
  • Snap: Snaps a layout cell to the nearest horizontal and vertical gridlines.
  • Visible: Decides whether gridlines should be visible or not.

Grids and Snap settings of layout tables overrides the document's grids and Snap; layout cells are snapped to grids of the layout table, rather than grids of the document.

Converting a layout table into a table

Checking the HTML source in the HTML tab, you can see that a layout table has the same properties as a table. A layout table in the Edit window is a table, a layout cell is a cell. Accordingly, a layout table can be converted into a table, a layout cell into a cell. Conversely, you can convert a table into a layout table.

top


Working with Layout Cells in Namo WebEditor

Layout cell and HTML tags

You can create a layout cell using Draw Layout Cell [image] on the Layout Table Toolbar. Inserting a layout cell creates the following HTML tags in the HTML tab.

e.g., <table border="0" cellpadding="0" cellspacing="0" width="101" height="101" namo_layoutbox="10,1,1,10,1,1">
...<tr>
<td namo_textbox="0,0,0,0,0,0,0,0,0,0">
</td>
</tr>...
</table>

A layout table, created in the Edit window, is a table. A layout cell inside a layout table is a cell. Accordingly, the properties of a layout table or a layout cell are equivalent to those of a table or a cell.

Working with multiple layout cells

If you want to align, or set the size or spacing of multiple layout cells, use the Layout Toolbox. Select the layout cells whose properties should be modified by clicking them while pressing the <Shift> key and click the relevant tool buttons. The last selected layout cell works as the basis of the cell alignment.

Layout Cell Properties dialog box

Double click a layout cell and the Layout Cell Properties dialog box appears. You can specify different layout cell properties, such as cell position, size, alignment, background color or image, margin, and border.

  • Position: You can specify the X/Y coordinate position of a layout cell in pixels.
  • Size: You can specify Width and Height of a layout cell in pixels.
  • Alignment: You can specify the alignment of objects inserted in a layout cell. There are two kinds of alignment - Vertical (Top, Middle, Bottom, Baseline) and Horizontal (Left, Right, Center).
  • Background: You can specify the background image and background color of the layout cell.
  • Margins: You can specify the layout cell margin in pixels.
  • Borders: You can specify the thickness and color of the layout cell border.

Inserting objects in a layout cell

You can insert the same objects into a layout cell as those which can be inserted in a cell of a table. When moving or drawing a layout cell, overlapping a layout cell with another object will turn your mouse-pointer into [image]. Generally, you cannot overlap a layout cell with other inserted objects. If you activate Snap by selecting the Snap option in the Layout Table Properties dialog box, the layout cell will be drawn according to the grids.

top


Inserting a layout table

You can insert a layout table using the Layout Table Properties dialog box or drawing the layout table directly.

Using the Layout Table Properties dialog box

  1. Select the [Table > Layout Table > New Layout Table...] menu command.
  2. In the Layout Table Properties dialog box, specify the properties of the layout table and click OK.
  3. A layout table is inserted where the cursor is located.

Drawing a layout table directly

  1. Select the [ Table > Layout Table > Draw Layout Table...] menu command, or click Draw Layout Table [image] on the Layout Table Toolbar.
  2. When the mouse-pointer turns into [image], draw a layout table by dragging. The size of a layout table is displayed in a yellow pop-up description, which enables you to create a layout table to the exact size you want.
  3. Release the mouse button. A layout table is created.

    4. (A layout table with 40 pixels of width/height)

To escape from the Draw Layout Table mode, press the <Esc> key or right-click the mouse button.

To show the Layout Table Toolbar, select the [View > Toolbars > Layout Table] menu command.


Decorating the background of a layout table

You can decorate a layout table by inserting a background image or applying a background color. In case you have applied the background image or color to both the layout table and cells, background image or color applied to the layout cells take the precedence.

  1. Double-click a layout table or select {Layout Table Properties...} in the shortcut menu.
  2. In the Layout Table Properties dialog box, specify the background image and color.
  3. Click OK.

    4. (Example of a background image inserted in a layout table. The image 'bicycle_blue.gif' was selected in the Clip Art tab of the Resource Manager.)

If the background image is bigger than the layout table, the image will be cropped to fit in. If the background image is smaller than a layout table, the image is displayed repeatedly as a checkerboard.


Converting a layout table to a table

You can convert a layout table to an ordinary table. This conversion makes a layout table a table, a layout cell a cell.

  1. Select a layout table by clicking anywhere inside the layout table. If the layout table is selected, the resize handles on the border of the layout table will appear.
  2. Select the [Table > Layout Table > Convert Layout Table to Table] menu command.
  3. The layout table is converted to a table, layout cells to cells.

Example

  1. Select a layout table by clicking anywhere inside the layout table.

  2. Select the [Table > Layout Table > Convert Layout Table to Table] menu command.
  3. The layout table is converted to a table, layout cells to cells.


Deleting a layout table

You can delete a layout table using the <Del> key. If you want to cancel deleting, press the shortcut key <Ctrl+Z> or click Undo [image] on the Standard Toolbar.

  1. Click anywhere inside the layout table or place the cursor before the layout table.
  2. Press the <Del> key. A message "Do you want to delete the selected layout table?" appears.

  3. Click Yes to delete the selected layout table.


Converting a table to a layout table

You can convert a table to a layout table.

  1. Select a table by clicking anywhere inside the table.
  2. Select the [Table > Layout Table > Convert Table to Layout Table] menu command.
  3. The table is converted to a layout table.

Example

  1. Select a table by clicking anywhere inside the table.

  2. Select the [Table > Layout Table > Convert Table to Layout Table] menu command.
  3. The table is converted to a layout table.


Modifying grid properties of a layout table

You can modify the grid properties of a layout table. You can specify the vertical/horizontal grid spacing and visibility. You can also activate or deactivate the Snap option.

  1. Double-click a layout table, or click to select a layout table and then select the [Table > Layout Table > Layout Table Property...] menu command.
  2. The Layout Table Properties dialog box appears.
    • To adjust the grid spacing, modify the values in Horizontal and Vertical under Grid.
    • Deselect Snap to inactivate the snap function which attracts layout cells to grids.
    • To make grid invisible, deselect Visible.
  3. Click OK.

    4. (Example of changing Horizontal/Vertical grid from 10 pixels to 20 pixels in a 40x40 layout table)


Resizing a layout table

You can resize a layout table either by dragging or by using the Layout Table Properties dialog box.

Resizing a layout table using the mouse

  1. Select a layout table. The resize handles will appear.
  2. Resize the layout table by dragging one of the 8 resize handles. Layout table size (width x height) is displayed in a yellow pop-up description.
  3. If you have activated the Snap option, the size of the layout table increases or decreases while fitting grids.

Using Layout Table Properties dialog box

  1. Double-click a layout table or click the layout table and select the [Table > Layout Table > Layout Table Properties...] menu command.
  2. Enter Height and Width in pixels in the Layout Table Properties dialog box.
  3. Click OK.

You can resize a layout table while maintaining its width-height ratio by dragging one of the resize handles while pressing the <Shift> key.

When the Snap option is on, you can increase or decrease the size of a layout table by the spacing of the horizontal/vertical grid you have specified in the Layout Table Properties dialog box. When the Snap option is off, you can resize a layout table to whatever size you want.

Example

  1. Insert a 40 x 40 layout table whose grid spacing is 10 pixels with the Snap option on.
  2. Select the layout table and drag the lower-right resize handle. The width and height decrease or increase by 10 pixels because grid spacing is 10 pixels and the Snap option is on.
  3. Release the mouse button when the width and height become 50 pixels.

top


Inserting a layout cell

You can insert layout cells in a layout table.

  1. Create a layout table.
  2. Select the [Table > Layout Table > Draw Layout Cell] menu command or click Draw Layout Cell [image] on the Layout Table Toolbar.
  3. When the mouse-pointer turns into [image], left click and drag the mouse to the size you want. If the Snap option is activated, borders of the layout cell are attracted to grids.

    4. (Example of inserting the text "Layout cell" after creating a layout cell in the layout table.)

If you don't want the grids to attract layout cells, deselect Snap in the Layout Table Properties dialog box.

The mouse-pointer turns into [image] outside the layout table or where a layout cell cannot be inserted.

To escape from the Draw Layout Cell mode, press the <Esc> key or right-click the mouse button.


Selecting a layout cell

You can select multiple layout cells in a layout table.

  1. Place the mouse-pointer on the border of a layout cell. Select the layout cell when the mouse-pointer turns into [image].
  2. A layout cell is selected and the mouse-pointer turns into a hand ( [image]) when you hold down the left mouse button. The resize handles appear on the border of a layout cell.
  3. Select other layout cells while pressing the <Shift> key.


Moving a layout cell

You can move a layout cell either by dragging or using the Layout Cell Properties dialog box.

Moving the layout cell by dragging

  1. Place the mouse-pointer near the borders of a layout cell. Click the layout cell when the mouse-pointer turns into [image].
  2. The mouse-pointer turns into a hand ( [image]) and 8 resize handles appear on the layout cell borders.
  3. Click the layout cell and drag it to where you want. The position of the layout cell is displayed in a yellow pop-up description.
  4. You can select and move multiple layout cells at once.

Moving multiple layout cells

  1. Select the multiple layout cells by clicking the layout cells while holding down the <Shift> key.
  2. Release the <Shift> key you have been pressing.
  3. Click in and drag the last selected layout cell with the mouse. The other layout cells are also moved to the same direction and in the same distance.
  • Selecting multiple layout cells and pressing arrow keys moves the layout cells by 1 pixel.
  • Selecting multiple layout cells and pressing arrow keys while pressing the <Shift> key moves the layout cell by 10 pixels.

Using the Layer Cell Properties dialog box

  1. Double-click a layout cell or select the {Layout Cell Properties...} from the shortcut menu.
  2. Enter the relevant values in Left and Top under Position and size in the Layout Cell Properties dialog box.
  3. Click OK.

Selecting a layout cell and pressing arrow keys moves the layout cell by 1 pixel.

Selecting a layout cell and pressing arrow keys while holding down the <Shift> key moves the layout cell by 10 pixels.

The mouse-pointer will turn into [image], when it is impossible to move a layout cell (when you try to move a layout cell out of the layout table or over another layout cell).

Example

  1. Insert two layout cells A and B, of which the width is 30 and the height is 40.
  2. Select layout cell A and 8 resize handles will appear. Click the layout cell and drag it as the mouse-pointer turns into a hand ( [image]).
  3. The position where layout cell A will occupy is displayed as dotted gray line. Layout cell A can move into (30,0), which does not override layout cell B.
  4. If you release the mouse button when mouse-pointer is [image], the layout cell is moved to the area marked by gray dotted line (30,0).

top


Resizing a layout cell

You can resize a layout cell either by dragging or by using the Layout Cell Properties dialog box.

Resizing a layout cell using the mouse

  1. Select a layout cell. The resize handles will appear.
  2. Resize the layout cell by dragging one of the 8 resize handles. Layout cell size (width x height) is displayed in a yellow pop-up description.

Using the Layout Cell Properties dialog box

  1. Double-click a layout cell or click the layout cell and select the [Table > Layout Table > Layout Cell Properties...] menu command.
  2. Enter Height and Width under Position and size in the Layout Cell Properties dialog box.
  3. Click OK.

Resizing multiple layout cells

  1. Select the multiple layout cells by clicking the layout cells while holding down the <Shift> key. When selected, the resize handles of each layout cell will appear.
  2. Resize the last selected layout cell by dragging one of its 8 resize handles using the mouse or arrow keys and <Shift> and/or <Ctrl> key. The other selected layout cells are resized as well. For example, if you make the last selected layout cell 10 pixels wider and 20 pixels longer, the other layout cells are enlarged as much. You can also use arrow keys and <Shift> and/or <Ctrl> key. For this method, refer to the following references.

You can resize a layout cell while maintaining its width-height ratio by dragging one of the resize handles at the corner and pressing the <Shift> key and releasing the mouse button.

You can increase or decrease the size of a layout cell by 1 pixel by pressing one of the arrow keys while holding down the <Ctrl> key. You can also increase or decrease size of a layout cell by 10 pixels by pressing one of the arrow keys while holding down <Shift+Ctrl>.

The mouse-pointer will turn into [image], When it is impossible to resize a layout cell (when you try to resize a layout cell beyond the layout table or over another layout cell).

Example

  1. Insert two layout cells A and B, of which the width is 30 and the height is 40.
  2. Select layout cell A. When the resize handles appear, drag the right-bottom resize handle.
  3. The maximum area of layout cell A is displayed as dotted gray line. Layout cell A can be extended to the extent that does not overlap layout cell B (50 x 50).
  4. If you release the mouse button when the mouse-pointer turns into [image], the layout cell is expanded to the area marked by gray dotted line.

Adjusting the layout cell size to the minimum area containing the inserted objects

  1. Insert a layout cell inside a layout table
  2. Place the cursor in the layout cell and insert contents.
  3. Select the layout cell by clicking the border of the cell. The cell borderline is highlighted and 8 resize handles appear.
  4. Select one of the following methods.
  • Select the [Format > Layout > Fit to Contents] menu command or click Fit to Contents [image] on the Layout Toolbar.
  • Select the [Table > Layout Table > Layout Cell Properties...] menu command or {Layout Cell Properties...} in the shortcut menu. In the Layout Cell Properties dialog box, press Fit to contents [image] under Position and size and click OK.
  5. The layout cell size is automatically adjusted to fit to the contents inside the layout cell.

    6. (Example: When Fit to Contents is applied to a layout cell after inserting 'bicycle_blue.gif' from the Clip Art tab of Resource Manager.)

top


Decorating the background of a layout cell

You can decorate a layout cell by inserting a background image or applying a background color.

  1. Double-click a layout cell or click the layout cell and select the [Table > Layout Table > Layout Cell Properties...] menu command.
  2. In the Layout Cell Properties dialog box, specify Image and Color under Background.
  3. Click OK.

    4. (Example of a background image inserted in a layout cell. The image 'bicycle_blue.gif' was selected from the Clip Art tab of the Resource Manager.)

If the background image is bigger than the layout cell, the image will be cropped to fit in. If the background image is smaller than a layout cell, the image is displayed repeatedly as a checkerboard.


Applying borders to a layout cell

You can specify the border thickness of a layout cell. You can make a layout cell look framed by applying a border.

  1. Double-click a layout cell or click the layout cell and select the [Table > Layout Table > Layout Cell Properties...] menu command.
  2. Specify the border thickness by increasing or decreasing the values in Left, Right, Top, Bottom under Borders in the Layout Cell Properties dialog box.
  3. Select a border color in Color under Borders.
  4. Click OK.

    5. (Example of a layout cell that has blue colored Right, Left, Top, Bottom border, all with thickness of 3 pixels.)

If you adjust the value of Left, the values of Right, Top, Bottom change along with it. Change the values of Right, Top, and Bottom if you want to apply different thickness than that of the left border.


Specifying layout cell margins

You can specify margins for layout cells.

  1. Double-click a layout cell, or click a layout cell and select the [Table > Layout Table > Layout Cell Properties...] menu command.
  2. Specify the layout cell margins by increasing or decreasing the values of Left, Right, Top, Bottom under Margins in the Layout Cell Properties dialog box.
  3. Click OK.

    4. (Example of a layout cell with a background color, and its Left, Right, Top, Bottom margins all set to '5')

If you apply too large margin to a layout cell, the layout cell may not be displayed properly.

If you adjust the value of Left, the values of Right, Top, Bottom change along with it. Change the values of Right, Top, and Bottom if you want to apply different thickness than that of the left margin.


Aligning objects in a layout cell

You can specify the alignment of objects inserted in a layout cell.

  1. Select a layout cell and double-click it. You can also select the [Table > Layout Table > Layout Cell Properties...] menu command or {Layout Cell Properties...} in the shortcut menu.
  2. Specify the Horizontal and Vertical alignment under Alignment in the Layout Cell Properties dialog box.
  3. Click OK.

Example

  1. Create three layout cells in a layout table.
  2. Enter 'Top', 'Middle', 'Bottom' in the first, second, and third layout cell, respectively.
  3. Double-click each layout cell and set the Vertical alignment to 'Top', 'Middle', 'Bottom', respectively.
  4. Click OK.


Copying a layout cell

If you copy a layout cell, all the objects in the layout cell and the layout cell attributes are copied as well.

  1. Place the mouse-pointer near the borders of a layout cell. Click the layout cell when the mouse-pointer turns into [image].
  2. The layout cell is selected and the resize handles appear on the cell borders.
  3. Move the selected layout cell by dragging the mouse-pointer ( [image]) while pressing the <Ctrl> key. The position of the copied layout cell will be displayed in a pop-up description. The position is the X/Y coordinates of the left top edge.
  4. Release the mouse button and the layout cell is copied.

    5. (Example of copying a layout cell by clicking and dragging.)

You can select multiple layout cells and copy them at once.


Aligning multiple layout cells

You can align multiple layout cells or make them have the same width or size. When selecting multiple layout cells, the last chosen layout cell will be the basis of alignment.

Aligning layout cells

  1. Select a series of layout cells you wish to align while pressing the <Shift> key. Select the layout cell to which you wish to align other layout cells last.
  2. Select the [Format > Layout] menu command or use the tool buttons on the Layout Toolbar.
    • To align layout cells to the left, select the [Format > Layout >Align Left] menu command or click Align Left [image] on the Layout Toolbar.
    • To align layout cells to the right, select the [Format > Layout >Align Right] menu command or click Align Right [image] on the Layout Toolbar.
    • To align layout cells to the horizontal center, select the [Format > Layout >Align Center] menu command or click Align Center [image] on the Layout Toolbar.
      Align Left/Right/Center are activated only when the layout cells are vertically positioned.
    • To align layout cells to the top, select the [Format > Layout >Align Top] menu command or click Align Top [image] on the Layout Toolbar.
    • To align layout cells to the vertical center, select the [Format > Layout >Align Middle] menu command or click Align Middle [image] on the Layout Toolbar.
    • To align layout cells to the bottom, select the [Format > Layout >Align Bottom] menu command or click Align Bottom [image] on the Layout Toolbar.

      Align Top/Middle/Bottom are activated only when the layout cells are horizontally positioned.

Align buttons on the Layout Toolbar are activated only when two layout cells in the same (horizontal/vertical) direction are selected. The last chosen layout cell will be the basis of alignment.

Adjusting layout cell size

When you select multiple layout cells, the last chosen layout cell will be the basis of the resizing.

  1. Select a series of layout cells you wish to resize while pressing the <Shift> key. Select the layout cell that will be the basis of the resizing last.
  2. Select the [Format > Layout] menu command or use the tool buttons on the Layout Toolbar.
    • To make the selected layout cells have the same width, select the [Format > Layout > Make Same Width] menu command or click Make Same Width [image] on the Layout Toolbar.
    • To make the selected layout cells have the same height, select the [Format > Layout > Make Same Height] menu command or click Make Same Height [image] on the Layout Toolbar.
    • To make the selected layout cells the same size, select the [Format > Layout > Make Same Size] menu command or click Make Same Size [image] on the Layout Toolbar.

Resize buttons on the Layout Toolbar are activated only when more than two layout cells in the same (horizontal/vertical) direction are selected. The last chosen layout cell will be the basis of resizing.

Example

  1. Draw 3 layout cells in a layout table. (See the image below.)
  2. Select layout cell 1, 2, 3 while pressing the <Shift> key in orderly manner.
  3. Click Make Same Width [image] on the Layout Toolbar.
  4. The width of layout cell 1 and 2 get adjusted to that of layout cell 3.

Adjusting space between layout cells

  1. Select a series of layout cells while pressing the <Shift> key.
  2. Select the [Format > Layout] menu command or use tool buttons on the Layout Toolbar.
    • To make the horizontal spacing between layout cells equal, select the [Format > Layout > Space Across] menu command or click Space Across [image] on the Layout Toolbar.
    • To make the vertical spacing between layout cells equal, select the [Format > Layout > Space Down] menu command or click Space Down [image] on Layout Toolbar.
    • To resize the layout cell so that the objects inserted can fit in, select the [Format > Layout > Fit to Contents] menu command or click Fit to Contents [image] on the Layout Toolbar.

Space-control buttons on the Layout Toolbar are activated only when three or more layout cells in the same (horizontal/vertical) direction are selected. The last chosen layout cell will be the basis of resizing.

top


Deleting a layout cell

You can delete more than one layout cells at once. If you want to cancel deleting, press the shortcut key <Ctrl+Z> or click Undo [image] on the Standard Toolbar.

  1. Place the mouse-pointer on the border of a layout cell. When the mouse pointer turns into [image], select the layout cell. When the layout cell is selected, its resize handles appear at the border of the cell. To select multiple layout cells, select them while pressing the <Shift> key.
  2. Press the <Del> key.

Example

  1. Insert three layout cells in a layout table. Enter '1','2','3', respectively in each layout cell.
  2. Select layout cell 1 and 2 while pressing the <Shift> key.
  3. Press the <Del> key. Layout cell 1 and 2 are deleted.


Layout Table Properties dialog box

[Table > Layout Table > Layout Table Properties], {Select Layout Table - Layout Table Properties},

Size and Alignment

Background

Grid

Size and alignment

  • Width
    Specifies the width of the layout table in pixels.
  • Height
    Specifies the height of the layout table in pixels.
  • Alignment
    Specifies the alignment of the layout table from this drop-down menu.
    • (default) | Creates no HTML tags. Aligns the layout table to the left of the paragraph.
Left | Aligns the layout table to the left of the paragraph. You cannot place text to the right of the layout table.
Right | Aligns the layout table to the right of the paragraph. You cannot place text to the left of the layout table.
Center | Align the layout table at the center of a paragraph.
Left (Floating) | Aligns the layout table to the left of the paragraph. You can place text to the right of the layout table.
Right (Floating) | Aligns the layout table to the right of the paragraph. You can place text to the left of the layout table.

Background

  • Image
    Specifies an image file which will be used as a background image of the layout table.

            •

    Click Browse... to select an image file in the Open dialog box.

    Click Clip Art... to select an image from the Clip Art offered by Namo WebEditor.

    Click Site... to select an image file from the site in the Select File dialog box. This button is activated only when a site is open.
  • Color
    Specifies the background color of the layout table.

Grid

  • Horizontal
    Specifies the horizontal spacing of grids in pixels.
    • Snap | Checking this option makes horizontal grids attract objects when their size or position near the horizontal grids is changed.
Visible | Checking this option makes horizontal grids visible.
  • Vertical
    Specifies the vertical spacing of grids in pixels.
    • Snap | Checking this option makes vertical grids attract objects when their size or position near the vertical grids is changed.
Visible | Checking this option makes vertical grids visible.

top


Layout Cell Properties dialog box

[Table > Layout Table > Layout Cell Properties...], {Layout Table shortcut menu - Layout Cell Properties...},

Position and size

Alignment

Background

Margins

Border

Position and size

  • Left
    Specifies the x coordinate (horizontal location) of the layout cell in pixels.
  • Top
    Specifies the y coordinate (vertical location) of the layout cell in pixels.
  • Width
    Specifies the width of the layout cell in pixels.
  • Height
    Specifies the height of the layout cell in pixels.
  • Fit to Contents button
    Click this button to adjust the layout cell size to the size of the objects inserted in the layout cell. The layout cell is resized to the minimum area which contains the inserted objects.

Alignment

  • Horizontal
    Specifies the horizontal alignment of objects inserted in the layout cell from the drop-down list.
    • (default) | Creates no HTML tag. Aligns objects to the left of the layout cell.
Left | Aligns objects to the left of the layout cell.
Right | Aligns objects to the right of the layout cell.
Center | Aligns objects at the center of the layout cell.
  • Vertical
    Specifies the vertical alignment of objects inserted in the layout cell from the drop-down list.
    • (default) | Creates no HTML tag. Aligns objects in the middle of the layout cell.
top | Aligns object at the top of the layout cell.
Middle | Aligns objects in the middle of the layout cell.
Bottom | Aligns object in the bottom of the layout cell.
Baseline | Aligns object to the baseline of the layout cell.

Background

  • Image
    Specifies an image file which will be used as the background image of the layout cell.

            •

    Click Browse... to select an image file in the Open dialog box.

    Click Clip Art... to select an image from the Clip Art tab of the Resource Manager.

    Click Site... to select an image file from the site in the Select File dialog box. This button is activated only when a site is open.
  • Color
    Specifies the background color of the layout cell.

Margins

  • Left
    Specifies the left margin inside the layout cell in pixels.
  • Right
    Specifies the right margin inside the layout cell in pixels.
  • Top
    Specifies the top margin inside the layout cell in pixels.
  • Bottom
    Specifies the bottom margin inside the layout cell in pixels.

Borders

  • Left
    Specifies the thickness of the left borderline of the layout cell in pixels.
  • Right
    Specifies the thickness of the right borderline of the layout cell in pixels.
  • Top
    Specifies the thickness of the top borderline of the layout cell in pixels.
  • Bottom
    Specifies the thickness of the top borderline of the layout cell in pixels.
  • Color
    Specifies the border color of the layout cell.

top


What are Frames?

Frame

A frame refers to a 'skeleton', or 'structure' in its ordinary meaning. In other words, 'frame' implies the demarcation of a certain area. When used in relation to a Web page however, 'frame' refers to the individual window constituting each part of the vertically or/and horizontally divided Web page. In a broader sense, 'frame' refers to Web authoring methods, in which the screen of a Web browser is divided into several windows. One frame contains one HTML document within itself, and constitutes a whole Web page in connection with adjacent frames. Accordingly, one frame is one independent HTML document.

left frame

a.html

right frame

b.html

top frame

1.html

down frame

2.html

Why use frames?

Using frames spares you the chore of creating and applying a specific Web page repeatedly to your Web site. Therefore, frames are frequently used in Web sites that have large amounts of content and complex structure.


Frames and Frameset

Frames and framesets

Frames are a way to display two or more documents in the same Web browser window simultaneously. Frames divide a browser window into two or more partitions, each of which displays a different document. Each frame can be scrolled independently of other frames (if scrolling is enabled for the frame). A browser window can contain any number of frames at the same time, and each frame can display different documents at different times (but only one document at a time in each).

For instance, if a browser window contains two frames, one frame might display a document that consists of only a list of hyperlinks, while the other frame might display the referent of one of the links in the first frame. Each time you click a link in the first frame, the referenced document is loaded in the second frame.

A set of frames is called a frameset, and the document that contains information about the frames in a frameset is called the frameset document. The frameset document is an HTML document that contains nothing but a list of the frames in the frameset, some information about each frame--such as its name, size, and default document--and a message that is shown in browsers that do not support frames. The frameset document does not contain any of the content of the frames that it defines; that content is supplied by the frame documents. The frameset document itself is "invisible": when you open a frameset document in a browser, you don't see the frameset document--you see the documents in each frame.

Accordingly, a frameset document is required, in addition to the HTML documents corresponding to each of the frames.

frame1.html

a.html

b.html

c.html

For example, the above frameset 'Banner, Contents, Body' is made up of three frames. Therefore, you need 4 HTML documents to create the frame above--three frame documents (a.html, b.html, c.html) and a frameset document (frame1.htm). When you want to view this Web page with your browser, you only need to open the frameset document (frame1.html). The frame documents are automatically opened with the frameset document. You can see all the frames properly only when you have published all 4 files.

To split up your Web document using frames, use the Resource Manager - Frameset folder or Split Frame Horizontally/Vertically by selecting the [File > New...] or [Frame > Split Frame] menu command.

top


Frame Properties

Frame name

A frame name is the unique value of each document used to distinguish individual frames. On the other hand, the file name of a document is the name of the HTML document which will be opened within each frame.

A banner a.html

B

contents

b.html

C

detail

c.html

In the picture above, banner, contents, detail are the names of frame A, B, C, respectively. On the other hand, a.html, b.html, c.html are the names of the opened HTML documents in frames A, B, and C, respectively. Frame names are used once you have set the hyperlinks between frames.

Target frame

Target frame refers to the frame where the hyperlinked document is displayed when you click the hyperlink in the current frame. You can specify the target frame on your own, or simply use the default names offered by Namo WebEditor. The default target frame names are _blank, _parent, _self, and _top.

  • _blank
    Shows the hyperlinked document or image in a new browser window.
  • _parent
    Shows the hyperlinked document or image in the whole frameset, including the current frame.
  • _self
    Shows the hyperlinked document or image in the current frame.
  • _top
    Shows the hyperlinked document or image in the whole browser window, replacing the current frameset.

For example, if you want to set the hyperlinks in frame B and let the hyperlinked document or image be displayed in frame C, open the Frame Properties dialog box by selecting the [Frame > Frame Properties...] menu command. Next, select detail, which is the frame name of frame C, from the Default target frame drop-down menu.

Frame size and spacing

Frame size is specified by its width and height using 'pixels', '%', or '*(relative)'. Frame spacing is specified by its left and top margins using 'pixels'.

  • Pixels
    Fixes the size of a frame in pixels. Select pixels from the unit drop-down menu and enter the number of desired pixels. If you enter 100 pixels, the frame width or height is set to exactly 100 pixels. If the sizes of all the frames in a frameset are specified in pixels, and the sum of the sizes is different from the actual width or height of the browser window, then at least one frame will appear differently than specified. Therefore, it is suggested that you specify the size of at least one frame in relative terms.
  • %
    This regards the size of the current browser window as 100 and sets the size of each frame by a percentage of the total. If the sum of the sizes of all frames exceeds 100%, the size of each frame will be reduced by its proportion. If the sum of the sizes is less than 100%, the size of each frame will be increased by the same proportion. However, if one frame has its size specified in relative terms, the size of that frame will be increased to compensate for the size difference.
  • *(relative)
    Specifies the extra space not occupied by other frames or the relative size. For example, if a frameset is split vertically into three frames and the leftmost frame is assigned a relative width of 2, the middle frame a relative width of 4, and the rightmost frame a relative width of 3, then the ratio of the widths of the three frames will be 2:4:3.

'Pixel' is a fixed measure like 'cm', or 'mm'. On the other hand, '%' is a measure by which we describe what portion of the entire browser window a frame takes up. Accordingly, it is not a fixed measure and is shown differently according to the size of the browser window.

Showing and hiding the scroll bar

A Scroll bar appears when the document is larger than your browser window. However, you can either make the scroll bar visible or invisible irrespective of the document size, or make it appear automatically according to the window size.

Enable frame resizing in browser

By checking this check box, you can enable site visitors to resize the frame in their Web browser by clicking and dragging the frame border.

Frame border thickness

You can make the frame borders invisible or appear outstanding by specifying the frame border thickness, in pixels.

A

B

C

A

B

C

If you set the border thickness to 0, the borders will be hidden when the document is viewed in a browser. (The borders will still be visible in Namo WebEditor's Edit window.)

Due to a current bug in Internet Explorer, if the border thickness is set to 4 or less, the borders will be invisible when the document is viewed in Internet Explorer.

top


Creating a new frameset document

Creating a new frameset

  1. Select the [Frame > New Frameset...] or [File > New...] menu command.
  2. In the Resource Manager, click Frameset in the left folder list.
  3. Select a frameset among the right frameset types and click OK. When you select a frameset, information about it is displayed in Description and Filename at the bottom.
  4. The selected frameset appears in the Edit window.

You can easily create a well-balanced frameset document by selecting the desired frameset type from among the ready-made frameset lists in the Frameset tab of the Resource Manager.

Example

  1. To create a frameset consisting of a banner, contents, and a main frame, select the [Frame > New Frameset...] or [File > New...] menu command.
  2. Select 'Frameset10' in the Frameset tab of the Resource Manager. and click OK.
  3. The selected frameset appears in the Edit window, as shown below. You can insert a banner to frame A, contents to frame B, and details to frame C. Each frame has its default frame name such as 'banner', 'contents', and 'detail,' as well as its own default target frame.


Splitting a frame

You can add a frame to the current document or frameset document. If you create a frameset document by selecting the [Frame > New Frameset...] menu command, frame names are automatically specified. However, If you create a frameset document by selecting the [Frame > Split Frame] menu command, frames will not have their name. In this case, you should set the name of each frame in Frame Properties dialog box. Note that this task cannot be undone by selecting the [Edit > Undo] menu command.

Splitting a frame vertically or horizontally

  1. Select the [Frame > Split Frame > Left/Right/Top/Bottom] menu command.
  2. If you split the frame by selecting the [Frame > Split Frame > Bottom] menu command, the current one is displayed in the upper frame and the new frame in the lower frame. If you select other directions, the frame will split accordingly.

To remove the frame, click the frame border and drag it toward and outside of the Edit window. Click Yes when prompted whether you want to really remove the frame.

You can also spit a frame by clicking the Split Frame [image] button on the Standard Toolbar. Click the button and select the number of blocks of which you wish to split the frame into, as you do with the Create Table [image] button.

Example

  1. Select the [Frame > New Frameset...] menu command. In the Resource Manager, select 'Frameset10', which will open a frameset document as displayed below.

  2. If you want to split frame C horizontally, place the cursor within it and select the [Frame > Split Frame > Bottom] menu command.
  3. As you can see in the image below, the new frame D is created, which divides frame C into two frames.

top


Setting the default document of a frame

Although any frame in a frameset can display different documents at different times, each frame needs to have a default document. This is the document that will appear in the frame when the frameset is first opened in a browser. If a frame didn't have a default document, it would initially appear empty in the browser.

The identity of the default document for each frame is stored in the frameset document. When you save the frameset document, whatever document is open in a given frame becomes the frame's default document.

If any frame contains a temporary document at the time you save the frameset document, no default document will be defined for that frame. Therefore, make sure that every frame contains a non-temporary (saved) document when you save the frameset.


Removing frames

Removing frames changes only the structure of the frameset document (in case you have saved all the frames!). You should save the modified frameset document after removing any frame(s).

Removing frames with your mouse-pointer in the Edit window

  1. To remove the frame, place your mouse-pointer over the frame border. Your mouse-pointer now appears as an arrow.
  2. Click and drag the border line outside the Edit window. Ensure that while you drag the unwanted border toward the edge of the frameset, the size of the unwanted frame is reducing.
  3. Click Yes when a dialog box appears asking you to remove the frame.

Removing the frame in the Delete Frame dialog box

  1. Place the cursor inside the frame you wish to delete and select the [Frame > Delete Frame...] menu command.
  2. In the Delete Frame dialog box, specify the number of frames to be deleted in Number of rows or columns and click OK.
  3. Click Yes when a dialog box appears asking you to remove the frame.

You can delete multiple frames in the same direction (e.g.. vertical / horizontal) in the Delete Frame dialog box.

Example

  1. To remove frame A and C one after the other, place the mouse-pointer at the horizontal border of frame A.

  2. Drag the border over the top of the Edit window and click Yes when a dialog box appears asking you to remove the frame.
  3. To remove frame C, place your mouse-pointer on the vertical border of frame C, and drag the border to the outside of the Edit window to the right, as shown in the above image. Click Yes when a dialog box appears asking you to remove the frame.
  4. Frame A and C have been deleted and only frame B remains in the Edit window.

Removing a frame deletes its content as well.

It is the reduced frame that is removed when you drag the frame border. If more than three frames are aligned in the same direction (e.g., vertically, as shown below), and you want to delete all frames except one, click and drag the leftmost border all the way across its opposing border to the outside of the Edit window. For instance, if you drag the leftmost border to the right, frames B and C are deleted and only the leftmost frame (frame A) remains.

to

A

top


Fixing frames

You can fix the size of a frame irrespective of the browser window size. You can specify the width and height of a frame by 'pixel', '%', or '*(relative)'. To fix the frame size, specify the size by pixel.

Fixing frames

  1. To fix the size of the frames, irrespective of the browser window size, place the cursor inside the relevant frame.
  2. Select the [Frame > Frame Properties...] menu command.
  3. In the Frame Properties dialog box, set the width and height of the frame in pixels, using the Frame height and Frame width drop-down menu under Size and spacing. Click OK.

You can specify the Frame height and Frame width by 'pixel', '%', and '*(relative)'.

Example

  1. To fix the size of frame A irrespective of the browser window size, place the cursor inside frame A.

  2. Select [Frame > Frame Properties...] from the menu. Set Frame height by 'pixel' in the Frame Properties dialog box and click OK.
  3. Place the cursor inside frame B and select [Frame > Frame Properties...] from the menu. Set the Frame width by 'pixel' and Frame height to '*(relevant)' in the Frame Properties dialog box and click OK.
  4. Place the cursor inside frame C and select the [Frame > Frame Properties...] menu command. Set both Frame width and Frame height to '*(relevant)' in the Frame Properties dialog box and click OK.
  5. Check whether the height of frame A and the width of frame B have been fixed by modifying the window size of the Frameset Preview or by selecting the [View > View with Internet Explorer] [image] or [View > View with Netscape] [image] menu command.

If the width of frame B has been fixed in 'pixels' and the width of frame C is set to '*(relative)', the width of frame C will change according to the size of the browser window.

top


Specifying the target frame

Target frame refers to a specific frame, in which a hyperlinked Web page will be displayed when a site visitor clicks on any link in a frame. If you create a frameset document by selecting the [Frame > New Frameset...] menu command, frame names are automatically specified. However, If you create a frameset document by selecting the [Frame > Split Frame > Left/Right/Top/Bottom] menu command, frames will not have their name. In this case, you should set the name of each frame in the Frame Properties dialog box. You can enter a target frame in person or use 4 kinds of Default Target Frame (_blank, _parent, _self, _top).

To specify the target frame, do this:

  1. Place the cursor inside the frame whose target frame you wish to specify and select the [Frame > Frame Properties...] menu command.
  2. In the Frame Properties dialog box, select the target frame from the Browse target frame drop-down menu or click the Default Target Frame... button and select the target frame by clicking on the target frame area and click OK in the Target Frame dialog box.
  3. Click OK.

Target frame refers to the frame where the hyperlinked documents are displayed when you click the hyperlinks in the current frame.

In the Target Frame dialog box, clicking on the target frame area, whose frame name has not been specified, will show the message "The selected target frame has no name. Please specify the frame name first." In this case, set the name of each frame in the Frame Properties dialog box first and specify the default target frame later.

Example

frame1.html

A banner

B

contents

C

detail

  1. Select the [Frame > New Frameset...] menu command. In the Component tab of the Resource Manager, select 'Frameset 10 (banner, contents, detail)' from the list.
  2. If you want to set the hyperlink in frame B and let the hyperlinked documents be displayed in frame C, place the cursor inside frame B and select the [Frame > Frame Properties...] menu command.
  3. In the Frame Properties dialog box, set the default target frame to 'detail' in the Default target frame drop-down menu, and click OK.

top


Replacing documents in a frame

You can open a new or existing document in a frame. In this case, a document constituting a frame, not all the frame documents of a frameset, is replaced.

Opening new documents in a frame

  1. To close the current document and open a new one in the current frame, place the cursor within the appropriate frame and select the [Frame > New Document in Frame] menu command.
  2. If you haven't yet saved the current frame, a dialog box will appear asking whether to save the changes you have made.
  3. If you click No, the new document is opened in the current frame.

    4. A a.html

    B

    b.html

    C

    c.html

    ->

    A noname1.html

    B

    b.html

    C

    c.html

Click Yes when you wish to save the current document and open a new document. If you don't want to save the current document, click No. If you want to come back to the current frame without opening a new document, click Cancel.

Opening documents in a frame

  1. Select the [Frame > Open Document in Frame...] menu command when you wish to open a document from your local drive into the current frame.
  2. Click the file you wish to open in the Open dialog box and click Open. The selected file is opened in the current frame.

top


Modifying frameset document properties

Since the frameset document is just an ordinary HTML document, it has document properties just like any other Web documents. To view or modify a frameset document's properties, use the [Format > Document Properties...] menu command.

However, since a frameset document is invisible to the site visitor, most of its document properties are irrelevant, even though you can set all of them. (All the properties are relevant if the browser used to view the frameset does not support frames, in which case it will display the content of the frameset document - usually the no-frames message.)

Frameset properties

  1. To modify the properties of the current frameset, select the [Frame > Frameset Properties...] menu command or {Frameset Properties} in the shortcut menu.
  2. In the Document Properties dialog box, specify the properties in the General tab, and click OK.
  • The Location field provides the URL of the document or the path of the folder in which the current frameset document is saved. You can modify this information using the [File > Save As...] menu.
  • The Title text box contains the title of the document. The entered title is displayed in the title bar at the top of the Preview window or Web browser window.
  • You can enter the author of the document in Author.
  • Enter the summary of the document in the Description field. If you register your Web site with Internet Search services, this description is displayed with the URL of your Web site.
  • Keywords are used as search words by Internet search engines, just as with any other Web document.
  • Enter the frame in which hyperlinked documents or images are displayed in the Default target frame field.
  • The selected effect in Advanced page effects will operate on the frameset as a whole.
  • The selected sound in Background sound will play when the frameset is opened.
  • The document specified in URL jump to: will be opened, replacing the frameset in the browser window.

If you want to modify only the properties of the frame where the cursor is currently located, not those the frameset, select [Format > Frame Properties...] from the menu.

Example

  1. Select the [Frame > Frameset Properties...] menu command, or choose {Frameset Properties...} in the shortcut menu. The Document Properties dialog box is opened.
  2. Enter 'Frameset document properties' in the Title field.
  3. Enter 'Namo Interactive' in the Author field.
  4. Enter 'frameset' in the Keywords field and click OK.

top


Saving frames

You must save a frameset document as well as frame documents when you save a document made of frames. If you want to save all the documents connected to a frameset document, choose Save All Frames. If you want to save just frameset document, select Save Frameset. If you want to save a frameset as another frameset file, select Save Frameset As.... After you have modified a document made of frames, you should save the modified document(s) or save all the documents connected to the frame by selecting Save All Frames.

Saving all the documents connected to a frameset document

  1. To save the current frameset document and its frame documents, select the [Frame > Save All Frames] menu command.
  2. If you have not previously saved any of the documents, the Save As dialog box is opened for each frame in order.
  3. Enter File name and click Save.

If the document opened in any of the frames is not the frame's default document, you may want to avoid using the [Frame > Save All Frames] menu command, since any unintentional changes to the displayed document will be saved without prompting.

Saving a frameset document

  1. Select the [Frame > Save Frameset] menu command.
  2. If you have not saved any of the documents, the Save As dialog box opens. If you have already saved the frameset document, the modified contents are automatically saved in the current frameset document.
  3. Enter File name and click Save.

The Frameset document contains only the information on the name, size, and properties of individual frames. Therefore, whenever the contents of the frame are modified, the frame should be saved.

Since a frameset is composed of the frameset document and two or more frame documents, when saving a frameset you will need to save all its individual component documents.

Save frameset as another frameset

  1. To save the current frameset as another frameset, select the [Frame > Save Frameset As...] menu command.
  2. Enter File name and click Save in the Save As dialog box.

    3. frame1.html

    frame2.html

    A a.html

    B

    b.html

    C

    c.html

    A a.html

    B

    b.html

    C

    c.html

Save Frameset As allows you to save the current frameset as a second frameset with a new name, without changing the current frameset. The name of the frameset in the document tab is changed but the individual frameset documents are not. In other words, 2 frameset documents with different names will share the same individual frames.

To change the name of each frame document, place the cursor in the frame document you want to save and select the [File > Save As...] menu command.

top


Creating a new frameset document

Previewing a frameset

When you are editing a frameset, the Preview tab at the bottom of the main window is used to preview the document in the active frame. To preview the entire frameset, use the Frameset Preview tab. If any frame contains a temporary document, you will be prompted to save it before the frameset preview is displayed.


Setting a no-frames message

The no-frames message is a message that is shown when a frameset is opened in a browser that does not support frames. Most modern browsers - including all reasonably recent versions of Netscape and Internet Explorer - support frames, but very old browsers and some very basic browsers do not. In these browsers, the no-frame message is displayed when the user tries to open a frameset.

To view or modify the no-frames message, click the NoFramesMsg tab at the bottom of the Edit window. The default message is "This page contains frames. You need a Web browser that supports frames to view this page."

The no-frames message is actually just the content of the frameset document. Therefore, you can edit it just as you would any other Web document. Normally, however, this content is invisible to the site visitor, since most browsers do support frames.


Printing a frameset

You can preview the print layout of a whole frameset document and print it. To see the print layout of an individual frame, not the whole frameset document, select the [File > Print Preview] menu command.

Previewing the frameset print layout

  1. If you want to adjust the frameset layout or overall print layout, select the [Frame > Frameset Print Preview] menu command.
  2. If there is anything you wish to modify, click Close and edit the document. Otherwise, click Print... to open the Print dialog box where you can specify print options and print the frameset.

Printing frameset

  1. Select the [Frame > Print Frameset...] menu command to send and print the frameset to your printer or a file.
  2. Set the print option in the Print dialog box and click OK.

Frameset printing produces the frameset document exactly as it appears. To print each of the frames, place the cursor inside the target frame and select the [File > Print...] menu command.

Example

  1. Select the [Frame > Frameset Print Preview] menu command.
  2. Check the overall layout and appearance of the frameset using the Zoom In and/or Zoom Out buttons or by using the mouse to click Print....
  3. In the Print dialog box, click OK.

If you place the cursor inside frame A and select the [File > Print...] menu command, only frame A is printed. However selecting the [Frame > Print Frameset...] menu command will print all the frame documents, regardless of cursor location.

top


Frame Properties dialog box

[Frame > Frame Properties...], {Frame shortcut menu - Frame Properties...}, <Ctrl + Shift + R>

Path

Name

Default target frame

Size and spacing

Options

Borders

Path

Shows the name and location of the frame document. In general, you should not modify the contents of this text box. To rename the frame document, select the [File > Save As...] menu command.

Name

Enter a name for the frame. By giving the frame a name, you can later assign it as the target frame of a hyperlink or an action.

Default target frame

Specifies the default target frame of any hyperlinks contained within the frameset.

The default targets _blank, _parent, _self, and _top always appear in this menu. If you have named any of the frames in the current frameset, these frames will also appear in the menu by name.

  • Browse Target Frame... button
    Lets you specify the default target frame on a frame miniature. Click the this button and select the target frame by clicking on the target frame area and click OK in the Target Frame dialog box.

In the Target Frame dialog box, clicking on the target frame area, whose frame name has not been specified, will show the message "The selected target frame has no name. Please specify the frame name first." In this case, set the name of each frame in the Frame Properties dialog box first and specify the default target frame later.

Size and spacing

  • Frame width
    Sets the frame width in either 'pixels', as a 'percentage(%)' of the window, or in unitless terms relative '*(relative)' to adjacent frames within the frameset.
  • Frame height
    Sets the frame height in either pixels, as a percentage of the window, or in unitless terms relative to adjacent frames within the frameset.
  • Left margin
    Sets the left margin of the frame in pixels.
  • Top margin
    Sets the top margin of the frame in pixels.

Options

  • Scrollbar
    Specifies whether the frame should have a scrollbar. "Auto" means the frame will contain a scrollbar only if some of the contents of the frame cannot be seen without scrolling. The default value is "Yes".
  • Enable frame resizing in browser
    If this option is selected, site visitors can resize the frame in their Web browser by clicking and dragging the frame border.

Borders

  • Border thickness
    Sets the border thickness between frames in pixels. The default value is 5. If you set the border thickness to 0, the borders will be hidden when the document is viewed in a browser. (However, the borders will still be visible in Namo WebEditor's Edit window.)

Due to the current bug in Internet Explorer, setting border thickness to 4 or less causes the borders to be invisible when viewed in Internet Explorer.

top


New dialogue box - Frameset tab

Resource Manager - Frameset folder

[File > New... - Frameset folder], [Frame > New Frameset...],

  • Frameset list in the left
    Click the list on the left side of the Resource Manager to see available frameset templates in the right window.
  • Preview in the right
    Shows various types of frameset templates available.
  • Description
    Shows a brief description of the selected frameset template.
  • Filename
    Shows the filename of the selected frameset.


Delete Frame dialog box

[Frame > Delete Frame...]

  • Delete rows
    Deletes horizontally split frames.
  • Delete columns
    Deletes vertically split frames.
  • Number of rows or columns
    Enter the number of columns or rows to be deleted. You cannot enter more than the number of columns or rows that actually exist in the frameset.

The Delete Frame dialog box is used to delete one or more existing frames from a frameset. Delete columns deletes from the left frame to the right, and Delete rows deletes the frame from the top to the bottom.


Web and Multimedia

Many different multimedia formats are available to enrich the graphic, sound, and animation effect to the Web. You can insert popular multimedia files and specify settings directly from the Edit window.

Multimedia formats

  • Flash
    Flash animation is a vector type animation format made by Macromedia and created using Macromedia applications, such as Director and Fireworks.

    Compared to most other multimedia types, Flash objects have relatively small file sizes, because they are based on vector graphics (images described by mathematical expressions, rather than bitmaps); thus, taking less time to download. Flash files use the .swf extension. It is necessary to download Flash plug-in in order to view a Flash file.
  • Shockwave
    Shockwave is a multimedia technology developed by Macromedia. To preview Shockwave objects in the Preview window, you must have the Shockwave Player Plug-in for Internet Explorer installed in your computer. Your site visitors must also have the plug-ins in order to view your Shockwave objects. Shockwave files use the .dcr extension.
  • QuickTime
    QuickTime is a multimedia file format owned by Apple Computer. Many of the movies and sound files found on the Web are in QuickTime format.

    QuickTime files use the .mov extension. To preview QuickTime objects in the Preview window, you must have the QuickTime Plug-in for Internet Explorer installed on your computer. Your site visitors must also have the plug-in in order to view your QuickTime objects.
  • MIDI
    MIDI, which stands for Musical Instrument Digital Interface, is a music file format. A MIDI file is like a score for a song or a symphony; they don't actually contain any sounds, relying instead on your computer's sound card to generate the sounds. Thus, MIDI files are very compact and quickly downloaded.

    MIDI files use the .mid or .midi extension. To preview MIDI objects in the Preview window, you must have a plug-in capable of playing MIDI files installed for Internet Explorer on your computer. Your site visitors must also have the plug-in in order to listen to your MIDI objects.
  • RealAudio
    RealAudio is a highly-compressed, streaming sound file format owned by RealNetworks. "Streaming" means that RealAudio sounds (which can be minutes or hours long) don't have to be completely downloaded before they start playing. Rather, the sound data is "streamed" to your computer while the sound is playing. RealAudio is often used to play music and spoken word recordings.

    RealAudio files use the .ra, .rm or .ram extension. To preview RealAudio objects in the Preview window, you must have the RealPlayer plug-in for Internet Explorer installed on your computer. Your site visitors must also have the plug-in in order to listen to your RealAudio objects.
  • ActiveX controls
    ActiveX controls are similar to Java Applets, in that they are small programs that you can insert into a Web page to do things similar to what an ordinary application can do. Many ActiveX controls are built into Windows, and these (and other ActiveX controls that may already be installed in your system) are available in the Class ID drop-down menu when you open the ActiveX Control Properties dialog box.
    Flash, Shockwave, and RealAudio objects are actually handled by Namo WebEditor as ActiveX controls.

    ActiveX controls are not supported by Netscape, and may not be supported by other browsers besides Internet Explorer.
  • Java Applets
    A Java applet is a small program that can be inserted into a Web page. Unlike an ordinary application, a Java applet is not executed by double-clicking an icon or selecting an item in Windows' Start menu. Rather, it is executed automatically when you view the Web page containing it or when you click a button on the page. Also, most Java applets don't run in their own window; they run in the browser window. Java applets are available that can be used to do almost anything that you can do with an ordinary application, such as edit a spreadsheet, draw pictures, or play a game.

    Java applets use the .cla or .class file extensions. To find useful and entertaining Java applets, try searching for "Java applets" using your favorite Internet search engine.

Whenever you insert a multimedia object into a document, it is represented in the Edit window by a placeholder: a white box with a dashed border and the path of the object displayed in the center. To preview the multimedia object in action, switch to the Preview window.

top


Web Browser and Plug-ins

What is a plug-in?

A plug-in is a piece of program code that provides some functionality that isn't already built into a Web browser. Generally, the plug-in handles a file format that the browser doesn't itself handle, such as certain types of multimedia files. A plug-in object is a file that is handled by a plug-in. QuickTime movies and RealAudio files are two types of plug-in objects, but there are many more.

Refer to the following URLs for more information on multimedia files and plug-ins.

  1. Flash - Macromedia Home Page http://www.macromedia.com
  2. Shockwave - Macromedia Home Page http://www.macromedia.com
  3. QuickTime - Apple Homepage http://www.apple.com
  4. RealAudio - RealAudio Homepage http://www.real.com


Inserting a Flash animation

Flash animation is a vector type Web animation format made by Macromedia. Using Flash, you can make a dynamic image with sound, and sometimes a hyperlink, in a very small size of file. You should insert Flash movie file(*.swf), not Flash file(*.fla), in the Web document. To run Flash movies, you should install the plug-in that processes the file.

  1. Select the [Insert > Object > Flash...] menu command.
  2. In the Open dialog box, select the Flash file (*.swf) from your local drive or on the Web and click Open or Open URL.
  3. ActiveX Control Properties dialog box is opened and the Class ID and Codebase are inserted automatically.
  4. Specify the Border, Size and spacing, and Alignment.
  5. If you need to specify some parameters, click Parameters... and specify relevant properties in the ActiveX Control Properties dialog box.
  6. Click OK.

Flash files cannot be executed in the Edit window. Check by executing in the Preview window or in Web browsers.

Example

Insert a Flash file named 'flash_sample.swf' and check it in the Preview window.

  1. Select the [Insert > Object > Flash...] menu command.
  2. Select 'flash_sample.swf' in the Open dialog box and click Open.
  3. ActiveX Control Properties dialog box will appear, where ClassID and Codebase will be inserted automatically.
  4. Set Width to 400 pixels and Height to 200 pixels.
  5. Click Parameters... button, and enter properties in ActiveX Control Properties dialog box, and then click OK.
  6. Click OK button in ActiveX Control Properties dialog box and check in the Preview window. (See result).

top


Inserting a Shockwave file

Shockwave is a multimedia technology developed by Macromedia. You need a Shockwave plug-in to play Shockwave files (*.dcr).

  1. Select the [Insert > Object > Shockwave...] menu command.
  2. Select a Shockwave file in the Open dialog box, then click Open.
  3. ActiveX Control Properties dialog box is opened and Class ID and Codebase are entered automatically.
  4. Specify the Size and spacing, and Alignment.
  5. Click Parameters... to specify Shockwave-specific parameters in ActiveX Control Parameters dialog box. When you're finished editing the parameters, click OK.
  6. Click OK again to return to the Edit window.

When you insert a Shockwave animation into a document, the object is represented in the Edit window by a box with the words "Shockwave ActiveX Control" inside. To preview the Shockwave animation, switch to the Preview tab.


Inserting a Quicktime movie

Quicktime is a multimedia storage, and playback technology made by Apple. It is also the standard multimedia protocol for Machintosh computers. Playing a Quicktime movie (*.mov) requires Quicktime player which can be downloaded from the Web. When inserting a Quicktime file into your Web page, including a link to the download page or letting the visitors download in your site is a must.
  1. Select the [Insert > Object > QuickTime...] menu command.
  2. Locate and select a QuickTime movie file in the Open dialog box and click Open.
  3. In the Plug-in Properties dialog box, Plug-in path is entered automatically.
  4. Specify the Border, Size and spacing, and Alignment.
  5. To modify QuickTime properties, click QuickTime Properties... button and specify the relevant properties in the QuickTime Properties dialog box.
  6. Click OK.

When you insert a QuickTime movie into a document, it is represented in the Edit window by a placeholder (a box with a dotted outline and the path or URL to the movie file in the middle). to preview the actual QuickTime movie, switch to the Preview tab.

Example

  1. Select the [Insert > Object > QuickTime...] menu command.
  2. In the Open dialog box, select 'video_clip.mov' and click Open.
  3. In the Plug-in Properties dialog box, set the Border to '2'.
  4. Set Width to '100' pixel, Height to '100', and Alignment to 'Middle'.
  5. Click QuickTime Properties... button.
  6. In the QuickTime Properties dialog box, check Auto start and click OK.
  7. In the Plug-in Properties dialog box, Click OK.

top


Inserting a MIDI file

MIDI (Musical Instrument Digital Interface) is a protocol for electric musical instruments and computers to communicate. MIDI files are small-sized and can be played without additional application in your computer, so that they are widely used for background music of Web pages.

  1. Select the [Insert > Object > MIDI...] menu command.
  2. In the Open dialog box, select the MIDI file to be inserted and click Open.
  3. In the Plug-in Properties dialog box, Plug-in path is entered automatically.
  4. If you want to make your plug-in invisible in the Web browser, select Hide plug-in.
  5. Specify Border, Size and spacing, and Alignment.
  6. Click OK.

Example

  1. Select the [Insert > Object > MIDI...] menu command.
  2. In the Open dialog box, select the MIDI file 'sound.mid' and click Open.
  3. In the Plug-in Properties dialog box, specify Border to '2'.
  4. Set Width to '100' pixel, Height to '100' pixel, and Alignment to Middle.
  5. Click OK.


Inserting Windows Media Player

You can play various types of multimedia in the Web document using Microsoft Window Media Player. Microsoft Media Player can be used as CD player, Information database, radio player, and multimedia files storage. Get the updated information of Microsoft Windows Media Player at Microsoft Web site.

  1. Select the [Insert > Object > Windows Media Player...] menu command.
  2. Select a file in the Open dialog box and click Open.
  3. ActiveX Control Properties dialog box will open, and Class ID and Codebase will be inserted automatically.
  4. Specify Size and spacing, and Alignment.
  5. Click Parameters... and specify the properties in the ActiveX Control Parameters dialog box, if necessary.
  6. Click OK.

You cannot run the Windows Media Player in the Edit window. Switch to the Preview tab or Web browsers to play.


Inserting a RealAudio file

RealAudio is a streaming sound technology developed by Progressive Network. RealAudio Player, one of the most widely used plug-ins, plays RealAudio files (*.ra, or *.ram) while or after downloading the files from the web site. You can download a RealAudio Player at http://www.realaudio.com.

  1. Select the [Insert > Object > RealAudio...] menu command.
  2. Locate and select a RealAudio file in the Open dialog box and click Open.
  3. ActiveX Control Properties dialog box is opened and Class ID and Codebase are entered automatically.
  4. Specify Size and spacing, and Alignment.
  5. If you need to specify some parameters, click Parameters... and specify relevant properties in the ActiveX Control Properties dialog box.
  6. Click OK.

When you insert a RealAudio file into a document, it is represented in the Edit window by a placeholder. to preview the RealAudio file in action, switch to the Preview tab.

Example

  1. Select the [Insert > Object > RealAudio...] menu command.
  2. In the Open dialog box, select the RealAudio file 'real_audio.ra' and click Open.
  3. In the ActiveX Control Properties dialog box, enter 'video1' in ID.
  4. Click Parameters....
  5. In the ActiveX Control Properties dialog box, set Autostart to 'No', Console to "clip1', Controls to 'imagewindow' and click OK.
  6. Click OK.


Inserting an ActiveX control

ActiveX control is a type of components that use COM technologies developed by Microsoft, to provide interoperability with other types of COM components. ActiveX controls are distributed through Internet, and are "activated" by the Web browser performing a variety of functions. It may take a while to open the dialog box if there are lots of ActiveX controls installed in your system.

  1. Select the [Insert > Object > ActiveX Control...] menu command.
  2. In the ActiveX Control Properties dialog box, select the control from the Class ID drop-down menu. If you click the drop-down menu, the ActiveX Control list in your hard drive is displayed.
  3. Specify Size and spacing, and Alignment.
  4. If you need to specify the parameters, click Parameters... and specify relevant properties in the ActiveX Control Properties dialog box.
  5. Click OK.

You can execute ActiveX controls in the Preview window or in Web browsers that support ActiveX, but not in the Edit window.


Inserting a Plug-in

A Plug-in is a piece of program code that provides some functionality that isn't built into a Web browser. Generally, the plug-in handles a file format that the browser doesn't handle itself, such as certain types of multimedia files. A plug-in object is a file that is handled by a plug-in. There are variety of plug-ins that enriches the capability of web browsers.

  1. Select the [Insert > Object > Plug-In...] menu command.
  2. In the Plug-in Properties dialog box, enter the Plug-in path by clicking Browse... and specifying the plug-in file you want to insert.
  3. Enter in Alt text the description for the Web browsers which do not support the plug-in.
  4. Enter the URL in which you can download the plug-in in Plug-in address.
  5. If you want to make your plug-in invisible to the visitors, check Hide plug-in.
  6. Specify Border, Size and spacing, and Alignment.
  7. Click OK.

The location where you have inserted a plug-in is displayed as a dotted rectangle in the Edit window. Double-click the rectangle and you can edit the plug-in properties such as Size and spacing, and Alignment. You can modify the size of the plug-in by dragging any of the resize handles on the rectangle to the position you want. If you have selected Hide plug-in, the plug-in mark ( [image]) is displayed at the location you have inserted the plug-in.


Inserting a Java Applet

A Java applet is a small program that can be inserted into a Web page. Unlike an ordinary application, a Java applet is not executed by double-clicking an icon or selecting an item in Windows' Start menu; rather, it is executed automatically when you view the Web page containing it or when you click a button on the page. Also, most Java applets don't run in their own window; they run in the browser window. Java applets are available that can be used to do almost anything that you can do with an ordinary application, such as edit a spreadsheet, draw pictures, or play a game. Java Applet file has '*.class' or '*.cls' extension and should be placed in the same folder as the html file that contains the Java Applet.

  1. Select the [Insert > Object > Java Applet...] menu command.
  2. In the Applet Properties dialog box, click Browse... and specify the applet file (*.class or *.cla) to be inserted. When the file is specified, the Code and Codebase are entered automatically.
  3. Specify Name if needed.
  4. Enter in Alt text the description for the Web browsers that do not support the Java Applet plug-in.
  5. Specify Border, Size and spacing, and Alignment.
  6. Click Parameters... to open the Applet Parameters dialog box.
  7. Click Add... to add a parameter. Enter the Name and Value of the parameter, and click OK.
  8. Click OK in the Applet Parameters dialog box.
  9. Click OK in the Applet Properties dialog box.

Specifying parameters

  1. Click Parameters....
  2. In the Applet Parameters dialog box, Click Add....
  3. In the Parameter Name and Value dialog box, enter Name and Value and click OK.
  4. In the Applet Properties dialog box, click OK.

Java Applets cannot be executed in the Edit window. Execute in the Preview window or in Web browsers that support Java Applet.

The location where you have inserted Java Applet is displayed as a dotted rectangle in the Edit window. Double click the rectangle to open Applet Properties dialog box where you can edit applet properties. You can modify the size of the plug-in by dragging any of the resize handles on the rectangle to the position you want.

Parameters should be entered correctly to function Java Applets. When downloading a Java Applet from WWW, also acquire parameters information.

Example

  1. Open the Web document that you want to insert an applet in, and save Web document, Java Applet file, and image files in the same folder by selecting [File > Save] menu command.
  2. Select the [Insert > Object > Java Applet...] menu command.
  3. Click Browse... in the Applet Properties dialog box and select 'Lake.class'. The Code and Codebase are automatically inserted.
  4. Insert 'Lake Applet' in the Name text box and 'Water reflection effect' in the Alt text text box.
  5. Set Width and Height to '300' pixels.
  6. Click Parameters... and click Add... in the Applet Parameters dialog box.
  7. In the Parameter Name and Value dialog box, enter 'image' for Name and 'sea.gif' for Value.
  8. Click OK in the Applet Parameters dialog box.
  9. Click Ok in the Applet Properties dialog box, and check if the applet runs properly in the Preview window.

top


Inserting a background sound

You can insert a Background Sound to your web page. Files that can be used for background sound include wave files(*.wav), MIDI files(*.mid), AIFF sound(*.aif, *.aifc, *.aiff) and AU Sound(*.au, *.snd). You can also hyperlink a sound to images or texts, allowing the visitors to play or download the sound file.

  1. Select the [File > Document Properties...] menu command or press the shortcut key <Ctrl + F2>.
  2. In the Document Properties dialog box, click Styles tab.
  3. Enter a URL or path to a sound file in Background sound, or click Browse... to select a sound file from your local drive.
  4. Specify how many times the file should be repeated in Repeat. If you want to keep the music playing continuously, check Repeat forever.
  5. To listen to the selected music in advance, click [image].
  6. Click OK.

Only Internet Explorer activates the background sound inserted in the Document Properties dialog box. In case you want to listen to the sound with Netscape, you should install a relevant plug-in.

Example

  1. Select [File > Document Properties...] in the menu or press the shortcut key <Ctrl + F2>.
  2. In the Document Properties dialog box, click Styles tab.
  3. Enter 'bgsound.mid' for Path in Background sound.
  4. Set Repeat to 1 times.
  5. Play and listen to the background sound in advance by clicking [image].
  6. Click OK.(see result)


Inserting spreadsheets

You can insert MS Excel spreadsheets into the web document. Choose the Insertion method to decide how to edit data. If you choose to preserve the link with the spreadsheet or to embed the spreadsheet in the html, you will edit the data in Excel. If you choose to copy just the data, you will edit the data in the Web Editor.

  1. Select the [Insert > Other > Spreadsheet...] menu command.
  2. In the Spreadsheet dialog box, click Browse... and specify the spreadsheet file to be inserted.
  3. Select the way to link the original data file with the inserted spreadsheet under Insertion method.
  4. Click OK.


ActiveX Control Properties dialog box

[Insert > Object > ActiveX Control...], ActiveX Control

General

Size and spacing

Alignment

Parameters

General

  • Class ID
    Select the ActiveX object you want to insert in this drop-down menu.
  • ID
    Enter a name for the inserted object (or just use the default ID).
  • Codebase
    Enter the URL from which the ActiveX control may be downloaded. (This is used by browsers when a site visitor doesn't have the ActiveX control installed on their system.)
  • Data file
    Enter the URL of the data file used by the ActiveX object, if any.

Size and spacing

  • Width/Height
    Specify the width and height of the ActiveX object as it will appear in the document. You can specify the size in pixels or as a percentage of the window size.
  • Horizontal/Vertical spacing
    Specify the amount of blank space around the object in pixels.

Alignment

Specify how to align the object with text on the same line.

Parameters

Click to open the ActiveX Control Parameters dialog box, where you can edit the values of each of the object's parameters.

When you insert an ActiveX object into a document, a static preview of the object is shown in the Edit window. To preview the object in action, switch to the Preview tab.

This dialog box may take several seconds to appear if you have many ActiveX controls installed in your system.

top


ActiveX Control Parameters dialog box

[Insert > Object > ActiveX Control... - Parameters button]

Editing parameters

To edit the value of a parameter, find the desired parameter in the left column, then click on its current value in the right column. The method of entering the value varies: some parameters allow typing the value, some require you to select a value from a drop-down menu, and some require you to click a button to open a dialog box.

Properties button

Click to open the properties dialog box for the object, if it has one.


QuickTime Properties dialog box

[Insert > Object > QuickTime... - QuickTime Properties button]

General

Connection

General

These are options that relate to playback of the QuickTime movie. By default, the corresponding settings specified in the QuickTime software on the site visitor's computer will be observed, but you can force any of these options on or off using the check boxes.
  • Auto start
    Select this option to force the QuickTime movie to start automatically as soon as it has been loaded.
  • Loop
    Select this option to force the movie to repeat continuously.
  • Controller
    Select this option to display the QuickTime controller below the movie.
  • Play every frame
    Select this option to force the QuickTime plug-in to play every frame of the movie (instead of dropping frames as necessary to maintain the frame rate specified in the movie).

Connection

  • URL
    Enter the URL of the document that will be loaded if the site visitor selects Open This Link button in the drop-down menu in the QuickTime controller. You can type this in, or click Browse... to browse for a document.
  • Target
    Specify the target window of the link. Enter "_self" if you want the document to open in the same window. Select quicktimeplayer from the drop-down menu if the document is another QuickTime movie. If you leave the text box blank, the document will open in a new browser window.

top


Applet Properties dialog box

[Insert > Object > Java Applet...],

General

Size and spacing

Alignment

Parameters

Style

General

  • Code
    Enter the name of the Java applet to insert. The name must end with '.class' or '.cla'. Click Browse... to locate and select a Java applet file.
  • Codebase
    Enter the path or URL to the Java applet file. If you selected an applet using the Browse... button, this field is automatically filled in.
  • Name
    Enter a name for this instance of the Java applet to distinguish it from other instances of the applet in the document, if there are more than one.
  • Alt text
    Enter the text that will appear at the applet's location in the document if a site visitor has disabled Java support in their browser.

Size and spacing

  • Width/Height
    Specify the width and height of the applet as it will appear in the document. You can specify the size in pixels or as a percentage of the window size.
  • Horizontal/Vertical spacing
    Specify the amount of blank space around the applet in pixels.

Alignment

  • Alignment
    Specify how to align the applet with text on the same line.

Parameters

Click to open the Applet Parameters dialog box, where you can edit the values of each of the object's parameters and add or remove parameters.

Style

Click to open the Styles dialog box, where you attach a CSS style to the applet.

When you insert a Java applet into a document, a static preview of the applet is shown in the Edit window. To preview the applet in action, switch to the Preview tab.

top


Applet Parameters dialog box

[Insert > Object > Java Applet... - Parameters... button]

Tag name

Shows the name of the tag that will be used to assign parameters to the applet. The tag name is always "param"; this is not editable.

List box

Lists the existing parameters and their values.

Buttons

  • Add...
    Click to open the Parameter Name and Value dialog box, where you can enter a new parameter and its value.
  • Modify...
    Click to open the Parameter Name and Value dialog box, where you can edit the selected parameter's name and value.
  • Remove
    Click to delete the selected parameter.


Parameter Name and Value dialog box

[Insert > Object > Java Applet - Parameters... button - Add... button]

  • Name
    Enter the parameter name.
  • Value
    Enter the value for the parameter.


Plug-In Properties dialog box

[Insert > Object > Plug-In...],

General

Size and spacing

Alignment

General

  • Plug-in path
    The path or URL to the plug-in file. Click Browse... to locate and select a plug-in file on your local drive.
  • Alt text
    The text that will be shown in place of the plug-in in browsers that do not support the plug-in.
  • Plug-in address
    The URL at which the plug-in program needed to view the plug-in file may be downloaded. This is useful for site visitors who don't have the appropriate plug-in program installed on their browser.
  • Borders
    The thickness of the dark border around the plug-in, in pixels. Leave blank for no border.
  • Hide plug-in
    Select this option to hide the plug-in in the Edit window. To be able to work with a hidden plug-in, make sure the [View > Marks > Special Tag Marks] menu command has been selected.

Internet Explorer does not support borders around plug-ins.

Size and spacing

  • Width/Height
    The width and height of the plug-in as seen in a browser, expressed in pixels or as a percentage of the browser window size.
  • Horizontal/Vertical spacing
    The amount of blank space around the plug-in, in pixels.

Alignment

Specifies how the plug-in will be aligned with text on the same line.

top


Spreadsheet dialog box

[Insert > Other > Spreadsheet...], Spreadsheet

Source

Insertion method

Source

  • Excel file
    Select this option to use an existing Excel file. Type the path or URL to the file, or click Browse... to locate and select a file on your local drive.
  • Current table in document
    Select this option to send the current table in the current document to Microsoft Excel, then import it back into the document as an Excel table.

Insertion method

  • Link to original spreadsheet
    Converts the Excel table to an HTML table and inserts a hidden link to the original spreadsheet into the HTML document. The link makes it possible to edit the table in Microsoft Excel by right-clicking the table and selecting {Edit Spreadsheet...} in the shortcut menu. After you edit the table and close the Excel document, the contents of the table are automatically updated in the Edit window.
    If you open and edit the original spreadsheet without using the Edit Spreadsheet... command in Namo WebEditor, you can select Update Spreadsheet Contents... to update the table in the Edit window.
  • Embed into HTML document
    Converts the Excel table to an HTML table and embeds a hidden copy of the original Excel table in the HTML document. The result is similar to linking to the original spreadsheet, except that the table remains editable in Excel even if you move, rename, or delete the original Excel file.
  • Static import
    Converts the Excel table to an HTML table without linking to or embedding a copy of the original Excel file. The table is not editable in Excel.

You must have Microsoft Excel installed on your computer in order to use this feature.

If the location or filename of the original Excel file changes, the link will be broken and it will not be possible to edit the imported table in Excel.

top


What is a Layer?

What is a layer?

A layer refers to an area in an HTML document in which various objects (images, text, tables, etc) can be inserted. You can insert multiple layers in a document and even place one layer over another. You can set layers as visible or invisible, place them precisely where desired, and apply various effects to them. Therefore, you can position text or images anywhere, which normally have a limitation in occupying their position in a Web document, by inserting them within a layer. You can even create dynamic effects with them.

Note, however, that layers are not always properly displayed in some Web browsers and can appear differently than expected. Please take the following into consideration when working with layers.

  • When you insert a layer within another layer
    A layer inserted into another layer is called a child layer. Netscape does not properly display the position of a child layer.
  • When you apply a style sheet to a table within a layer
    Internet Explorer and Netscape show a difference in interpreting style sheets, which is caused by the different style sheet processing of each browser. For example, Netscape does not properly display the style sheet applied to a table within a layer. Thus, it is suggested you do not apply style sheets to a table inside a layer.
  • When you insert a layer in the middle of a paragraph
    If you insert a layer in the middle of a paragraph, note that the position of the layer will change according to the size of the browser window. Generally, texts or images take a relative position, which makes them automatically change their position according to the change in size of your browser window. However, a layer takes an absolute position and it does not change its position according to a size change of the browser window. Thus, it is suggested that you create the layer at the top of the Web document.

top


Layer Properties

  • Layer ID
    Every layer in a document has a unique ID, which can be useful in identifying the layer not only in the     Layer List window, but also for use in actions, Time Lines, and the Script Wizard.
  • Position
    The position of the layer is set by the top-left edge. For example, in case a layer is located in the topmost and leftmost of your Web browser as in the following picture, the position of the layer is top 0 pixel, and left 0 pixel.

    (Left 0, Top 0)

    layer1

  • Size
    Sets the height and width of a layer, in pixels.
  • Z-index
    Z-index refers to the order in which a layer is displayed among other overlapped layers, as in the following picture. The layer with the highest z-index appears on the top.
  • Visibility
    You can set a layer as visible or invisible. The visibility of a layer is important because it can be used to create dynamic effects by applying actions to layers.
  • Background
    You can specify the layer's background color or image. However, note that layer background image or color is not properly displayed in Netscape.

top


Working with Layers in Namo WebEditor

Layer and HTML tags

If you click Insert Layer [image] on the Standard Toolbar, a layer is inserted in the Edit window, and the <div></div> tag is inserted in the HTML window.

e.g., <div id="layer1" style="width:200px; height:200px; position:absolute; left:26px; top:14px; z-index:1;"></div>

If you want to insert a layer using <LAYER> tags, you should select the Use <LAYER> tag option in the Layer Properties dialog box. However, when you use this option, the layer will be displayed only in Netscape.

e.g., <layer id="layer1" left="26" top="14" width="200" height="200" z-index="1"></layer>

  • Layer tag mark: The layer tag mark indicates the position where the layer is inserted within the document.
  • Layer handle: The layer handle is used when you select a layer by clicking. This serves also as a handle for moving the layer in the Edit window.
  • Layer area: A layer is a movable container for text, images, and other page elements. Anything that can be put on a page can also put into a layer (including another layer).

Layer Inspector

If you insert a layer in a Web document, the Layer Inspector is activated. You can specify layer name, layer position, size, Z-index, background, etc in the Layer Inspector. You can also align or resize layers using various layout buttons at the bottom.

Layer Properties dialog box

If you double-click a layer in the Edit window, the Layer Properties dialog box appears. Here, you can specify all the properties of a layer such as layer ID, position, size, Z-index, background, etc.

Layer list

View the list of all the layers inserted in the document by selecting the [Window > Layer List] menu command and opening the Layer List window. Namo WebEditor automatically labels the layers you have inserted as 'layer1', 'layer2', 'layer3', etc.

Applying effects to layers

  • The Script Wizard
    Namo WebEditor's built-in effects in the Script Wizard can be applied to layers.
  • Actions and Events
    It is easy to perform tasks such as making a hidden image visible or getting a description to appear by applying actions to layers.
  • Time Lines
    A Time Line refers to an effect, which can control the position and properties of a layer on a timely basis for the purpose of creating an animation effect. You can create various types of animation using layers and a Time Line.

top


Creating layers

A layer is a movable container for text, images, and other document elements. Anything that can be put on a page can also be put into a layer (including other layers). Layers can be positioned anywhere on a page, because they "float" on top of other page elements.

Creating a layer

  1. Insert a layer by selecting the [Insert > Layer] menu command or by clicking Insert Layer [image] on the Standard Toolbar.
  2. Place the cursor outside of the layer. If another layer is created while the cursor is inside the first layer, the second layer becomes a child layer.
  3. Repeat steps 1 and 2 to create additional layers.

To see the layer tag mark ( [image]) in the Edit window, click Show/Hide Paragraph Marks [image] on the Standard Toolbar. To see the layer area in the Edit window, select the [View > Marks > Layer Outlines] menu command. Selecting the [Window > Layer List] menu command lets you check the information on the layers inserted in the Edit window.

Creating a child layer

  1. Insert a layer by selecting the [Insert > Layer] menu command or by clicking Insert Layer [image] on the Standard Toolbar.
  2. Place the cursor inside layer 1 and insert a layer (layer 2) inside the first layer you have created.
  3. The first layer becomes a parent layer and the layer created later becomes its child layer.

The child layer's position is determined in relation to that of the parent layer. Thus if you move a parent layer, the child layers move along with it. Note that Netscape does not properly show child layers.

Example

If you want to create layer 1 and layer 2, and insert a child layer (layer 3) inside a parent layer (layer 2), perform the following steps:

    layer 1

    Parent layer
    (layer 2)

    Child layer
    (layer 3)
  1. Create a layer (layer 1) by clicking Insert Layer [image] on the Standard Toolbar.
  2. Place the cursor outside of layer 1 and create layer 2.
  3. Place the cursor inside layer 2 and create layer 3.

If you double-click a layer in the layer list of the Layer List window, the Layer Properties dialog box for the selected layer appears. If you click or place your mouse cursor inside a layer, Layer Inspector is activated. You can take care of tasks you want using the Layer Inspector.

top


Inserting contents into layers

You can insert text or images inside a layer. You can also set background color or image to a layer.

Inserting text and images in a layer

  1. Place the cursor inside the layer.
  2. Input some text and modify any text properties you wish.
  3. To insert an image in a layer, click Insert Image [image] on the Standard Toolbar.

Editing the layer's background

  • Using the Layer Inspector
    1. Double-click or place the mouse cursor in the layer in the Edit window. The Layer Inspector gets activated.
    2. Click Color icon in the Bg of the Layer Inspector to specify the background color. You can insert an image from the local drive to use as a background by clicking Browse... .
  • Using the main menu
    1. Double-click the layer or select {Layer Properties...} in the shortcut menu.
    2. In the Layer Properties dialog box, set the background color by selecting a color from the Color drop-down menu under Background. You can insert an image from hard local drive or use a clip-art image as a background by clicking Browse... , Clip Art... , or Site... and specifying the image file. The Site.... button is activated only when a site is open..

The layer background color is not properly displayed in Netscape.

Example

Using Layer Inspector

  1. Click or place the mouse cursor inside a layer and the Layer Inspector is activated.
  2. In Layer Inspector, click the Color Picker Pop-up [image] icon beside Bg and specify the color you want. You can insert an image or clip art from the local drive and use it as a background image by clicking Browse... and specifying the image file.

Using Layer Properties dialog box

  1. Place the cursor inside the layer.
  2. Type "Animal."
  3. Click Insert Clip Art [image] on the Standard toolbar.
  4. In the Clip Art dialog box, select an image and click OK.

To insert text or images in a layer, the cursor should be placed within the layer as shown in the above picture. Inserting contents while the layer is selected (the state in which 8 resize handles are displayed) deletes the layer.

top


Moving layers

Moving a layer by dragging

  1. Click anywhere on the layer.
  2. The layer is now selected and the mouse pointer appears as a hand ( [image]).
  3. Drag the layer handle to the desired position where you want the layer to be placed.

Moving layer using Layer Inspector.

  1. Click or place the cursor inside the layer. The Layer Inspector is activated.
  2. In the Layer Inspector, enter relevant values in X (x coordinate) and Y (y coordinate) and press <Enter>.

After clicking on a layer, pressing an arrow key on the keyboard moves the layer up/down or right/left by a single pixel. Pressing an arrow key while pressing down the <Shift> key lets the layer move up/down or right/left by 10 pixels.

Repositioning a layer using the Layer Properties dialog box

  1. Double-click on a layer.
  2. In the Layer Properties dialog box, specify the Left and Top coordinates of the selected layer.
  3. Click OK.

The layer tag mark ( [image]) indicates the position where the layer is actually inserted within the HTML source document. The layer handle ( [image]) is displayed only when the layer is selected or the mouse cursor is placed within the layer.

Moving multiple layers

  1. Select the multiple layers by clicking the layers while holding down the <Shift> key.
  2. (When using the mouse) Release the <Shift> key you have been pressing.
  3. Click the last selected layer and the mouse-pointer turns into a hand. Drag the layer with the mouse. The other layers are also moved to the same direction and in the same distance.
  • Selecting multiple layers and pressing arrow keys moves the layers by 1 pixel.
  • Selecting multiple layout cells and pressing arrow keys while pressing the <Shift> key moves the layout cell by 10 pixels.

top


Resizing layers

You can adjust the size of a layer after inserting an object in it. You can also adjust the size of different layers at once.

Resizing a layer by dragging

  1. Place your mouse pointer over a layer, and left click when the mouse pointer turns into a hand ( [image]).
  2. The layer is selected and 8 resize handles appear.
  3. Place the mouse cursor over one of the resize handles. Resize the layer by dragging any of the handles when the mouse cursor turns into an arrow as below.

Select the layer and press the arrow key on the keyboard while pressing down the <Ctrl> key. The size of the layer increases or decreases by one pixel with each arrow-key press. If you press the arrow key while pressing down <Ctrl+Shift>, the size changes by 10 pixels.

Resizing a layer using the Layer Inspector/ Layer Properties dialog box

  • Using Layer Inspector
    1. Select a layer or place the cursor inside a layer.
    2. In the Layer Inspector, specify W(Width) and H(Height) of the layer and press <Enter>.
  • Using Layer Properties dialog box
    1. Double-click the layer.
    2. In the Layer Properties dialog box, specify Width and Height of the layer.
    3. Click OK.

If you drag the resize handle at each corner and press <Shift>, the size of the layer is changed maintaining the original width/height ratio.

Resizing multiple layers

  1. Select the multiple layers by clicking the layers while holding down the <Shift> key.
  2. Resize the last selected layer cell by dragging one of the 8 resize handles using the mouse or arrow keys while holding down <Ctrl> and/or <Shift> key. The other selected layers are also resized. For example, if you make the layer 10 pixels wider and 20 pixels longer, the other layout cells are enlarged as much.

top


Copying and pasting layers

You can create multiple layers without using menu commands by making use of copying and pasting layers.

Copying and pasting layers

  1. Select the layer you want to copy. When selected resize 8 handles appear.
  2. Click Copy [image] on the Standard toolbar or press the shortcut key <Ctrl+C>.
  3. Place the cursor at the point where you want to paste the copied layer. If the cursor isn't moved, the layer will not be copied.
  4. Click Paste [image] on the Standard toolbar or press the shortcut key <Ctrl+V>.
  5. Drag the copied layer to the exact position where you want it to be placed.

When a layer is copied, all of the layer's properties such as its z-index, visibility, background color, size, position, etc., are copied along with it. When you copy a layer, the original and copied layers are overlapped so only layer tag mark is displayed where the mouse cursor is located. If you want to place the copied layer at another position, you can do so by dragging it.

To delete a layer, simply select the layer and press the <Del> key.


Overlapping layers

Multiple layers in the same document can overlap each other. The Z-index is the order in which the layers are overlapped. Normally, in such cases, the order of the layers from top to bottom is the reverse of the order in which they are created (i.e., the layer created last usually appears on top). When a layer is created, it is assigned a Z-index of 1. You can change this to any positive or negative integer. The higher the number, the higher the layer is in the top-to-bottom order. Layers that have the same Z-index are placed in their reverse order of creation.

When overlapping layers have no background color or contain only text of the same color, it may be difficult to determine which layers are in front of or behind others. To confirm the layer order, check the Layer List window by selecting the [Window > Layer List] menu command.

Using Layer Properties dialog box

  1. Insert several layers in the Edit window.
  2. Move the layers to overlap one another.
  3. Double-click a layer.
  4. Select one of the following methods:
  • Select the layer and specify Z-index in the Layer Inspector and press <Enter>.
  • Double-click the layer. In the Layer Properties dialog box, specify the Z-index of the layer and click OK.

The layer with a larger Z-index appears on top.

Using Layer Inspector

  1. Insert several layers in the Edit window.
  2. Move the layers to overlap each other.
  3. Resize each layer and specify background colors.
  4. Select the layer by clicking it.
  5. In the Layer Inspector, set the Z-index of each layer to '1', '2', '3', respectively and press <Enter>.

top


Viewing the layer list

You can view the list of all layers inserted in the Edit window using the Layer List window. If you select a layer in Layer List window, the Layer Inspector is activated, which enables you to modify properties of the selected layer.

  1. Select the [Window > Layer List] menu command, or press the shortcut key <Alt+5>.
  2. The layers window appears and shows the names of all layers, Z (the z-index), and the visibility properties.
  3. If you double-click a layer in the Layer List window, the Layer Properties dialog box is opened where you can modify the properties of the selected layer.

In the Layer List window, a child layer is displayed with an indentation as you can see in the following picture.


Applying effects to layers

A layer is one of the central elements in Dynamic HTML and used for various dynamic effects. You can apply effects to layers by using the Script Wizard, applying actions, or creating a Time Line animation. Action refers to the script that triggers a specific action when an event, such as a mouse click, occurs. You can perform tasks such as making a hidden image visible, getting a description to appear, or making a new browser window pop up by applying actions to layers.

Applying actions and events

  1. Insert a layer by clicking Insert Layer [image] on the Standard Toolbar.
  2. Select the [Window > Action] menu command or press the shortcut key <Alt + 7> to open the Action window.
  3. In the Action window, click the Add... button and specify the desired action.

Action refers to a script triggering a specific action when there happens an event, such as a mouse click. Applying actions to layers can create a pop-up image, description, or explanation. For the detailed information about actions, please refer to the help on Action.

Example

Creating an action which makes a layer disappear when clicked.

  1. Insert a layer (Layer 1) and specify the layer background as 'yellow' in the Layer Properties dialog box or in the Layer Inspector.
  2. Select the layer or place the cursor inside it and click Add... in the Action window.
  3. In the Action Properties dialog box, select 'OnMouseOver' from Event, 'Hide Layer' from Action. Select 'Layer 1' as Target layer. Parameters.
  4. You can see 'Layer 1' - located below - disappear when you place the cursor over the 'Layer 1' in the Preview tab.

Layer 1


Applying the snap effect to layers

Lets two nearby layers stick to each other's borders. This effect lets you put together several layers or align them to the horizontal/vertical borderline.

  1. Insert layers in a document.
  2. Select the [Window > Layer List] menu command or press <Alt + 5>.
  3. Check to select Snap to layer in the Layer List window.
  4. The Snap to layer effect is applied to the layers and two nearby layers stick to each other.

If you want to apply snap effect to the entire document, use the Snap effect of Guide and Grid.

When applying the snap effect to multiple layers, the last selected layer will be the criterion for the snap effect. In other words, the last selected layer is subject to the Snap to layer effect.

Example

  1. Insert layers in a document.
  2. Enter 'A', 'B', 'C' in each layer.
  3. Select the [Window > Layer List] menu command or press <Alt + 5>. Check to select Snap to layer in the Layer List window.
  4. If you bring 'A' and 'B' near 'C' while holding down the <Shift> key, 'A' and 'B' will stick to the vertical borderline of 'C'.

  5. If you select 'A' and 'C' while holding down the <Shift> key and bring them near 'B', 'A' will stick to the horizontal borderline of 'B' and 'C' to the vertical borderline of 'B'.

top


Aligning multiple layers

You can align multiple layers at once.

  1. Select several layers by clicking them while holding down the <Shift> key.
  2. Click the relevant button in the Layer Inspector or on the Layout Toolbar. You can also select the [Format > Layout] menu command. The last selected layer is the criterion of alignment.
    • To align the layers to the left, Click Align Left [image] in the Layer Inspector or on the Layout Toolbar. You can also select the [Format > Layout > Align Left] menu command.
    • To align the layers to the horizontal center, click Align Center [image] in the Layer Inspector or on the Layout Toolbar. You can also select the [Format > Layout > Align Center] menu command.
    • To align the layers to the right, click Align Right [image] in the Layer Inspector or on the Layout Toolbar. You can also select the [Format > Layout > Align Right] menu command.
    • To align the layers to the top, click Align Top [image] in the Layer Inspector or on the Layout Toolbar. You can also select the [Format > Layout > Align Top] menu command.
    • To align the layers to the vertical middle, click Align Middle [image] in the Layer Inspector or on the Layout Toolbar. You can also select the [Format > Layout > Align Middle] menu command.
    • To align the layers to the bottom, click Align Bottom [image] in the Layer Inspector or on the Layout Toolbar. You can also select the [Format > Layout > Align Bottom] menu command.

If you select multiple layers, the last selected layer is the criterion of alignment.

Example

  1. Insert layers in a document.
  2. Enter 'A', 'B', 'C' in each layer.
  3. Select the layers in the order of 'A', 'B', 'C' while holding down the <Shift> key.
  4. Click Align Right [image] in the Layer Inspector.
  5. The layers 'A' and 'B' are aligned to the right with reference to 'C'.

top


Adjusting the size of multiple layers

You can adjust the size of multiple layers.

  1. Select several layers by clicking them while holding down the <Shift> key.
  2. Click the relevant button in the Layer Inspector or on the Layout Toolbar. You can also select the [Format > Layout] menu command.
    • To equalize the width of layers, click Make Same Width [image] in the Layer Inspector or on the Layout Toolbar. You can also select the [Format > Layout > Make Same Width] menu command.
    • To equalize the height of layers, click Make Same Height [image] in the Layer Inspector or on the Layout Toolbar. You can also select the [Format > Layout > Make Same Height] menu command.
    • To make the size (both the width and height) of layers the same, click Make Same Size [image] in the Layer Inspector or on the Layout Toolbar. You can also select the [Format > Layout > Make Same Size] menu command.

If you resize multiple layers at once, the last selected layer is used as the criterion of resizing.

Example

  1. Insert layers in a document.
  2. Enter 'A', 'B', 'C' in each layer.
  3. Select the layers in the order of 'A', 'B', 'C'.
  4. Click Make Same Width [image] in the Layer Inspector.
  5. The widths of 'A' and 'B' are made equal as that of 'C'.

top


Adjusting the spacing between multiple layers

You can adjust the spacing between layers at once. Selecting more than 3 layers activates the Space Across [image] and Space Down [image] icon, used for the adjustment of layer spacing.

  1. Select multiple layers while holding down the <Shift> key.
  2. Click the relevant button in the Layer Inspector or on the Layout Toolbar. You can also select the [Format > Layout] menu command.
    • To equalize the horizontal spacing between layers, click Space Across [image] in the Layer Inspector or on the Layout Toolbar or select the [Format > Layout > Space Across] menu command.
    • To equalize the vertical spacing between layers, click Space Down [image] in the Layer Inspector or on the Layout Toolbar or select the [Format > Layout > Space Down] menu command.

Example

  1. Insert layers in a document.
  2. Enter 'Layer1', 'Layer2', 'Layer3' in each layer.
  3. Select the layers in the order of 'Layer1', 'Layer2', 'Layer3' while holding down the <Shift> key.
  4. Click Space Across [image] in the Layer Inspector.
  5. The spacing between the layers will be adjusted, which will get 3 layers to keep the same spacing. The distance between 'Layer1' and 'Layer2' will be made the same as that between 'Layer2' and 'Layer3'.


Fitting the layer size to contents

You can adjust the layer size automatically to the size of objects inserted in the layer.

  1. Insert a layer in a document.
  2. Place the cursor in the layer and insert an object.
  3. Select the layer and 8 resize handles appear on the layer border.
  4. Select Fit to Contents [image] in the Layer Inspector or on the Layout Toolbar or select the [Format > Layout > Fit to Contents] menu command.
  5. Layer size is automatically adjusted to the size of the object inserted in the layer.


Layer Inspector

Click any layer inserted in the Edit window and the Layer Inspector is activated. You can modify the layer properties directly in the Layer Inspector. Specify the relevant values in the Layer Inspector and press <Enter> or move on to other items to apply the entered values to the selected layer.

  • ID
    Displays the name of each layer.
  • Vis: (Visibility)
    Specifies the visibility properties of a layer.
    • Default | If not specified, a layer will be visible. However, the layer's visibility can be toggled by a JavaScript action.
Inherit | A child layer will have the same visibility as its parent layer. (A parent layer is a layer containing another layer.)
Show | Sets the layer visible.
Hide | Sets the layer as invisible. It is also invisible in the Edit window. If layer outlines are not visible, use the [View > Marks > Layer Outlines] menu command.
  • Z-index
    A layer's z-index determines whether it is in front of or behind other overlapping layers. The layer with a larger Z-index appears on top.
  • X
    Shows 'x coordinate' of a layer in pixels.
  • Y
    Shows 'y coordinate' of a layer in pixels.
  • W (Width)
    Specifies the width of a layer in pixels.
  • H (Height)
     Specifies the height of a layer in pixels.
  • Bg (Background)
    Specifies background image or background color of a layer.

            •

    You can specify a background image by clicking Browse... and specifying an image file in your local hard drive or on a specific URL in the Open dialog box.

    You can specify background color of a layer by clicking the Color Picker Pop-up icon and selecting a color in the Color Picker Pop-up. Unless you specify any background color, the layer is displayed as transparent.

  • Layout Toolbar
    You can align layers using the buttons on the Layout Toolbar.
    • Layer Alignment | Align Left | Layer Spacing | Space Across
 | Align Right |  | Space Down
 | Align Center | Layer Size | Make Same Width
 | Align Top |  | Make Same Height
 | Align Bottom |  | Make Same Size
 | Align Middle |  | Fit to Contents

top


Layer Properties dialog box

{double-click a layer handle or special tag marks}, {double-click a layer in the Layer List window}, {right-click a layer handle or formatting mark and select Layer... from the shortcut menu}, <Alt + Enter>

Layer ID

Position and Size

Background

Script Wizard

Save using <LAYER> tag

Layer ID

Shows the name of the layer. A layer is automatically assigned a name by Namo WebEditor at the time of creation. You can change the name as long as the new name doesn't conflict with the name of another layer.

Position and Size

To move or resize a layer, the layer's handle and resize handles are generally used in the Edit window. However, for maximum precision you can enter numbers in this dialog box.
  • Left
    Specifies how much the layer is offset from the left edge of the window, in pixels.
  • Top
    Specifies how much the layer is offset from the top edge of the window, in pixels.
  • To move a layer by one pixel
    1. Select the layer you want to move.
    2. Press <Up/Down/Right/Left Arrow>.
  • To move a layer by 10 pixels
    1. Select the layer you want to move.
    2. Press <Shift + Up/Down/Right/Left Arrow>.
  • Width
    Specifies the width of the layer, in pixels.
  • Height
    Specifies the height of the layer, in pixels.
  • To resize a layer by 1 pixel
    1. Select the layer you want to resize.
    2. Press <Ctrl + Up/Down/Left/Right Arrow>.
  • To resize a layer by 10 pixels
    1. Select the layer you want to resize.
    2. Press <Shift + Ctrl + Up/Down/Left/Right Arrow>.
  • Z-index
    A layer's z-index determines whether it is in front of or behind other overlapping layers. To bring a layer to the front, simply assign a higher z-index to it. To send it to the back, assign it a lower z-index. If two layers have the same z-index, the one that was created later will be in front.

When layers overlap but have no background color, or contain only the same-color text, it may be difficult to determine by visual inspection which layer is in front. To confirm the layers' order, check the Layer List window, which lists the layers' names and z-indices.

  • Visibility
    Determines the visibility of a layer.
    • Default | If not specified, a layer will be visible. However, the layer's visibility can be toggled by a JavaScript action.
Inherit | A child layer will have the same visibility as its parent layer. (A parent layer is a layer containing another layer.)
Show | Sets the layer as visible.
Hide | Sets the layer as invisible. It is also invisible in the Edit window. If layer outlines are not visible, use the [View > Marks > Layer Outlines] menu command.

Background

  • Image
    Enter a path or URL to an image file to use as the layer's background.

            •

    Click the Browse... button to locate and select an image file.

    Click the Clip Art... button to select an image from the clip art library.

    Click the Site... button to select an image in the Select File dialog box where you can select a file included in the site. Enabled only when a site is open.
  • Color
    Allows you to s    elect a background color for the layer from the Color Picker Pop-up. If not specified, the layer will appear transparent.

Versions of Netscape prior to 4.5 do not support background images and colors of layers.

Script Wizard
Click to open the Script Wizard dialog box, where you can attach a JavaScript effect to the layer. Four effects are available for layers: Animation Effect, Marquee, Slide Layer, and Floating Layer.

Save using <LAYER> tag
By default, Namo WebEditor creates layers using the <DIV> tag for compatibility with both Internet Explorer and the latest versions of Netscape. However, if you expect your document to be viewed using pre-4.5 versions of Netscape, select this option for compatibility with the older browsers.

If you select this option, the layer will not be visible in Internet Explorer.

If you select Show/Hide Special Tag Marks button [image] on the Standard toolbar, a layer tag mark ( [image]) will appear in the Edit window.

top


Layer List window

[Window > Layer List], <Alt + 5>,

Shows the list of layers included in the document. Click on a layer to select it for editing in the Edit window.

Snap to layer

Checking this options lets adjacent layers stick to each other. If you bring a layer near another one, two layers are glued.

ID

Shows the name of each layer.

Z

Shows the Z-index of each layer. The z-index of a layer determines whether it is in front of or behind other overlapping layers. To bring a layer to the front, assign a higher z-index for it. To send it behind others, assign it a lower z-index.

Visibility

Shows the visibility setting of each layer. If the visibility of a layer is set to Default, nothing appears in the Visibility column for the layer.

Double-click a layer to open the Layer Properties dialog box. Here you can change the properties of the layer.


Time Line Overview

Time Lines

A Time Line is a way of specifying changes in the position of one or more layers over time, after the document containing the layers has been loaded in a Web browser. The actual moving is done by a script, which is generated by Namo WebEditor when you create the Time Line.

A Time Line can start automatically as soon as the document is loaded in a browser, or it can be started and stopped by a JavaScript action that is triggered by some event, such as a mouse click. In addition, you can have multiple time lines in a single document; each Time Line can be triggered by a different event.

Layer and Time Line

You can create a layer animation by specifying layer position and properties in terms of time to a layer inserted in the Time Line window. You can also create eye-catching animations and let a specific action be performed at a specified time by controlling different Time Lines simultaneously.

Time Line and action

You can add an action to a specific scene of the Time Line. Applying actions to the Time Line lets you create various dynamic effects, such as stopping or restarting movement of a layer, by controlling an action, triggered by an event, in terms of time.

Example

Clicking on the butterfly when it sits on the flower makes it fly away.


Time Line Terms

To open the Time Line window, select the [Window > Time Line] menu command or press the shortcut key <Alt + 4>.

Definitions of terms regarding Time Lines

Refer to the image below for the names of various parts of Time Lines and the Time Line window.

Term | Definition
current frame indicator | The red line in the Time Line window that indicates the frame currently being viewed.
frame | The building blocks of a sprite; describes the position of one layer at a particular time.
key frame | A frame that describes a user-specified position. Positions between key frames are calculated automatically.
Action row | Shows whether an action has been applied to the frame. Shows 'A' when an action has been inserted.
Frames per second | Specifies how many frames should be displayed a second. The bigger this number, the faster the layer movement becomes.
layer | A movable container for text, images, etc.
layer handle | The small box at the top-left corner of a layer; used to move the layer.
layer outline | The gray line around a layer (not visible in a browser).
sprite | Part of a Time Line; describes the positions of one layer over an interval of time.
Time Line | Describes the positions of one or more layers over an interval of time.

top


Creating a straight-line animation

These instructions assume you already know what layers and Time Lines are, how to insert a layer into a Time Line, and how to create a simple, straight-line animation.

There are several techniques for creating a simple, straight-path animation. Each method is described below.

Creating a path by using the Time Line window

  1. Insert a layer in the Time Line window.
  2. Key frames are displayed at the both end of the sprite. Click the key frame and a red current frame indicator is placed over the key frame. Click the right key frame.
  3. Change the position of the layer by dragging its layer handle. A straight line appears connecting the first and the last position of the layer.
  4. Specify the Auto start and Repeat.

  5. Click one frame between the first and last frame to check the position of layer at that frame. Check whether the layer animation works properly in the Preview window.

Creating a path by dragging the layer

  1. Move the object you want to animate into a layer and insert the layer into the Time Line, creating a sprite.
  2. In the Time Line window, click the first frame of the sprite (indicated by a white dot at the left end of the sprite). The current frame indicator (the vertical red line) will move to that frame, if it isn't there already.

  3. Switch to the Edit window and drag the layer to the desired starting position.
  4. Switch back to the Time Line window and click the last frame of the sprite. The current frame indicator will move to that frame. Back in the Edit window, drag the layer to the desired end position. A thin black line will appear between the starting position and the ending position, indicating the path of the animation.
  5. To preview the animation you just created, click Auto start in the Time Line window, then switch to the Preview tab.

Creating a path using the arrow keys

  1. Move the object you want to animate into a layer and insert the layer into the Time Line, creating a sprite.
  2. Click the first frame of the sprite. Switch to the Edit window. Make sure the layer is still selected. Using the arrow keys, move the layer to the desired starting position. Each press of an arrow key moves the layer one pixel. Hold down the <Shift> key to move the layer ten pixels with each press of an arrow key.
  3. Switch back to the Time Line window and click the last frame of the sprite. Switch again to the Edit window (making sure the layer is still selected) and use the arrow keys to move the layer to the desired ending position.

Creating a path using the Layer Properties dialog box

The final, and most precise, method of creating a path is to enter the starting and ending coordinates of the path in the Layer Properties dialog box.
  1. Move the object you want to animate into a layer and insert the layer into the Time Line, creating a sprite.
  2. Double-click the first frame of the sprite. The Layer Properties dialog box will open. Enter the horizontal and vertical coordinates for the starting position in the Left and Top number boxes. Click OK to close the dialog box.
  3. Double-click the last frame of the sprite. In the Layer Properties dialog box, enter the coordinates for the ending position and click OK to close the dialog box.

You can have an animation start from, or end at, an invisible position above or to the left of the window by entering negative numbers for the horizontal and/or vertical coordinates. Similarly, the animation can start from or end at an invisible position below or to the right of the window if you enter coordinate values that are larger than the size of the window.

Example

top

A Straight Animation


Creating a curved-path animation

These instructions assume you already know what layers and Time Lines are, how to insert a layer into a Time Line, and how to create a simple, straight-line animation.

There are two ways to create a curved-path animation (one in which the layer moves in a relatively complex path between three or more defined points).

Method 1:Creating a curved path by inserting keyframes in a straight path

  1. Create a straight animation. Set the starting and ending positions of the sprite as desired.
  2. Click a frame where you want to insert a keyframe.
  3. Right-click the sprite and select {Insert Keyframe} in the shortcut menu. A new key frame (indicated by a white dot - [image]) will be created at the position of the current frame indicator.

  4. Click the newly created key frame. The red current frame indicator is placed over the new keyframe. Without moving the current frame indicator, drag the layer to the position where you want the layer to be when the keyframe you just created is reached when the Time Line is played. When you release the mouse button, the black line in the Edit window indicating the path of the layer will change shape, reflecting the new path.
  5. A curved line connecting the three keyframe is created. For each additional position that you want to specify in the path, repeat steps 2 through 4, creating new keyframes and dragging the layer to the desired position at each keyframe.

Method 2: Recording the path of a layer as you drag it

You can create a layer animation following the trace of the mouse by clicking a keyframe in the Time Line window and selecting {Record Path of Layer} in the shortcut menu.

  1. First, make sure the layer you want to animate is selected in the Edit window (its resize handles should be visible).
  2. Right-click anywhere in the Time Line window and select Record Path of Layer in the shortcut menu. The mouse-pointer will turn into an arrow with a tiny tape cassette icon underneath it.
  3. Click inside the layer handle and drag the layer through the path that you want it to take. As you drag the layer, small x marks will appear along the drag path. When you release the mouse button, a new sprite will appear in the Time Line window, containing as many keyframes as necessary to faithfully define your path.

After creating a sprite this way, you can fine-tune the position of the layer at each keyframe or add new keyframes using the technique in Method 1.

Example

top

a curved animation


Attaching actions to a Time Line

Probably the most powerful aspect of Time Lines is the ability to attach actions (scripts) to specific frames in a Time Line. When the Time Line reaches a frame with an attached action, the action is executed by the browser.

Since any action can be attached to a Time Line frame, the possibilities of orchestrating dynamic effects using Time Lines is limited only by your imagination. Sometimes, it may even be desirable to create a Time Line that contains no layer animations at all, but only causes various actions to be executed over time (with or without visitor interaction).

To attach an action to a Time Line frame, do this:

  1. Open the Time Line window by selecting the [Window > Time Line] menu command or pressing <Alt + 4>.
  2. Select the frame to which you want to attach an action and Add.. in the Action window. (You can open the Action window by selecting the [Window > Action] menu command or by pressing the shortcut key <Alt + 7>.)
  3. In the Action Properties dialog box, select Event and Action and set the Parameters, which differs with each type of action.
  4. Click OK and A, which implies that an action has been inserted at the frame, is displayed on the action row as below.

  5. Check the result in the Preview window.

Netscape may not properly display an action inserted in a Time Line animation.

In order for action attached to a Time Line to be executed, there must be at least one sprite in the Time Line, because a Time Line with no sprites will not play. If you wish to use a Time Line solely to trigger action, not to animate layers, create a single sprite using any layer (an empty layer will work) and place the sprite anywhere in the Time Line.

Example

Makes a flying butterfly sit on the flower by attaching an action (Stop Time line) to a specific frame. See the example.

  1. Insert 2 layers (Layer 1 and Layer 2) in the document.
  2. Place the cursor inside the layer and insert an image using Insert Clip Art [image] on the Standard Toolbar. Select and insert a butterfly image under [image > Animals] folder in 'Layer 1' and a flower image under [Plant > Plant] folder in 'Layer 2'.
  3. Make the butterfly in 'Layer 1' fly around using { Record Path of Layer } in the shortcut menu. Arrange the butterfly placed over the 'Layer 2', which contains the flower image.
  4. Open the Time Line window by selecting [Window > Time Line] in the menu or pressing <Alt + 4>. Click the frame in which the butterfly and flower are overlapped with each other.
  5. Press the shortcut key <Alt + 7> to open the Action window.
  6. Click Add... in the Action window.
  7. In the Action Properties dialog box, set the Action to 'Stop Time Line' and Time Line nameto 'timeline1'.
  8. In the Action Properties dialog box, click OK.
  9. 'A' appears on the action row of the frame to which the action has been attached.

Add an action (Play Time Line) which makes the sitting butterfly fly away when clicked.

  1. Select the butterfly image in the Layer 1.
  2. Click Add... in the Action window.
  3. In the Action Properties dialog box, set the Event to 'OnClick', Action to 'Play Time Line'. Select 'timeline1' for the Time Line name.
  4. In the Action Properties dialog box, click OK.
  5. Check whether the sitting butterfly flies away when clicked in the Preview window.

top


Inserting a layer into a Time Line

You should first insert a layer in the Time Line window in order to create a Time Line animation using the layer.

By inserting a layer into a Time Line, you create a sprite, which is a set of frames that determines how the layer moves over an interval of time. Each frame in a sprite contains information about the position of the layer at a particular time. By adjusting the position of the layer at different frames, you can make the layer move. You can have as many sprites in a Time Line as you want, and each sprite can represent the same layer or different layers.

Inserting a layer into a Time Line by drag-and-drop

Drag the layer by its handle into the Time Line window and drop it when the blue bar is at the position you want. A sprite containing 16 frames will be created at the drop location.
  1. Open the Time Line window by selecting the [Window > Time Line] menu command or pressing <Alt + 4>.
  2. Select a layer and drag its layer handle into the Time Line window.
  3. A sprite in a gray bar shape and two key frames in a circle shape ( [image]) are created in the Time Line window.

If the layer handle is not visible, or if the mouse-pointer doesn't turn into a hand when it's over the handle, click inside the layer first, then drag it to the Time Line window.

Inserting a layer into a Time Line using the Time Line shortcut menu

Used when it is difficult to drag a layer into the Time Line window.

  1. Select the layer by clicking its layer handle. (If the layer handle isn't visible, click inside the layer first.)
  2. Open the Time Line window by selecting the [Window > Time Line] menu command or pressing <Alt + 4>.
  3. Select {Insert Layer} in the shortcut menu of the Time Line window.
  4. A sprite in a gray bar shape and two key frames in a circle shape ( [image]) are created in the Time Line window.

Sprite refers to a series of frames that describes the positions and movement of one layer over an interval of time. At the left appears a name of a layer, controlled by the sprite. You can create multiple sprites for each layer and modify its position and length as you wish.

top


Recording the path of a layer

Recording the path of a layer lets you record complicated movement of a layer using a simple mouse drag.

  1. Open the Time Line window by selecting the [Window > Time Line] menu command or pressing <Alt+4>.
  2. Select a layer whose movement is to be recorded in the Edit window.
  3. Click frame 1 to place the current frame indicator at the frame 1. Select Record Path of Layer in the shortcut menu.
  4. When the mouse-pointer turns into [image], drag the layer along the path you want the layer animation to take.
  5. A sprite is created in the Time Line window. Click one of the frames and the position of the layer is displayed in the Edit window.
  6. Check to select the Auto start option and check if the layer animation works properly in the Preview window.

Example

Let's create a layer animation that describes a butterfly's movement by recording the path of a layer.

  1. Insert a layer in the document. Click Insert Clip Art [image] on the Standard Toolbar and select a butterfly image under [image > Animals] folder. Insert the selected image in Layer 1.
  2. Open the Time Line window by selecting the [Window > Time Line] menu command or pressing <Alt+4>.
  3. Select the layer in the Edit window.
  4. Click frame 1 to place the current frame indicator at the frame 1. Select Record Path of Layer in the shortcut menu.
  5. When the mouse-pointer turns into [image], drag the layer containing the butterfly image along the path you want the layer animation to take.
  6. A sprite is created in the Time Line window. Click one of the frames and the position of the layer is displayed in the Edit window.
  7. Check to select the Auto start option and check if the layer animation works properly in the Preview window.

To make the butterfly disappear, specify the position of the layer outside the Edit window at the last frame. In other words, select the last frame in the Time Line window and drag the layer containing the butterfly image outside the Edit window area.

top


Time Line window

[Window > Time Line], <Alt + 4>, Time Line

You can create animations with layers.

Time Line name

The drop-down menu in the top right corner of the Time Line window shows the name of the current Time Line.

To add a new Time Line, right-click anywhere inside the Time Line window and select {Add Time Line} in the shortcut menu. To delete the current Time Line, select {Delete Time Line} in the shortcut menu.

To rename the current Time Line, click the existing name and type in a new name.

Frame advance buttons

Click this button to go back to the first frame.

Click this button to go back one frame, moving the current frame indicator one frame left.

Click this button to advance one frame, moving the current frame indicator one frame right.

Hold down Previous Frame ( [image]) or Next Frame ( [image]) and you can preview the movement of Time Line objects.

frame/s

This text box can be used to specify the speed of the animation in frames per second. The bigger this number, the faster the layer movement becomes.

The actual speed at which the animation is played in a Web browser may vary from the speed you specify.

Auto start

If this option is selected, the animation will start as soon as the document containing it is loaded in the browser window. You can check whether this option has been applied to the Time Line or not in the Preview window.

Repeat

If this option is selected, the animation will repeat continuously. You can check whether this option has been applied in the Preview window.

Time Line window

A detailed plan of a Time Line animation; shows sprite, key frame, current frame indicator, frame number, action row, etc, which describe the movement of objects registered in the Time Line window.

  • Frame: A state of a layer at a specific time. Frame includes Z-index and Visibility of a layer.
  • Key Frame: A frame that describes a user-specified position. You can modify layer position or properties at this frame.
  • Sprite: A series of frames; describes the position and movement of one layer over an interval of time. At the left appears a name of a layer, controlled by the sprite. You can create multiple sprites for each layer and modify its position and length as you wish.
  • Frames per second: Specifies how many frames should be displayed a second. The bigger this number, the faster the layer movement becomes.
  • Action row: Shows whether an action has been applied to the frame. Shows 'A' when an action has been inserted.

top


Change Layer dialog box

[Window > Time Line - Shortcut menu > Change Layer]

You can transfer an animation from the selected layer to another layer, removing it from the selected layer.

Select new layer

Click the drop-down list button and all the layers inserted in the current document are displayed. Select a layer to which you want to apply the properties of the selected sprite. The previous sprite is deleted.

Change Layer... becomes deactivated when several objects (layers) inserted in the Time Line window are overlapped.

You can create copies of layer animation. Create a sprite, copy it, paste several times, and apply the sprite properties to different layers. You can easily create multiple animations in this way.


What are Forms?

A form is part of or an entire document, designed to obtain user inputs or dynamically show data to site visitors. A form only obtains or shows data; what actually processes the data is a server-side program, usually a Common Gateway Interface (CGI), not the form itself.

A form consists of many different types of form fields, actions and methods. The form action and method defines how the data should be processed. User inputs taken from a form are sent to Web server and processed by a CGI. Many different types of CGIs are often provided by the Web site hosting vendors, or you can program to give more interaction to your site. Most commonly used CGIs are shopping cart applications, on-line ordering systems, and search engines.

It's important to note that simply having a form on your Web site is not sufficient--you must also have a program on the Web server that will do something with the information provided in the form. Namo WebEditor provides ways to easily add forms to your site, but it's up to you to provide the server software to handle those forms.

Take the following steps to create a form field with Namo WebEditor.

  • Determine the type of information you wish to gather from your site visitors.
  • Determine the relevant form fields for the target information.
  • Insert the form fields in your document and specify the properties of each item.
  • Determine the method to deal with the information so that the form can properly function.


Form Elements

Form Field

Form fields are types of methods used when the site visitors input data to the form. The input data is transmitted to the Web server and processed by a CGI for further actions. Each type of form field provides different functions for others.

Types of form field

  1. One-line text box : Used to allow the site visitor to enter a small amount of text in a form.

  2. Scrolling text box : Used to let the site visitor enter more text than would fit in a one-line text box.

  3. Check box : Used to let site visitors select or deselect an option in a form.

  4. Radio button : Used when the site visitor must select only one item among two or more choices.

  5. Drop-down menu : Used in a form to let the site visitor select an item from a list.

  6. Push button : Used to let the site visitor submit a form, clear a form, or submit a value to the Web server.

  7. Image : Used to get the coordinate information of a clicked position.

    (An image, specified in the Image Form Field Properties dialog box, is displayed.)
  8. Hidden form field : Used for sending a value to the Web server while keeping the form invisible to site visitors.
    (The hidden form field is invisible to the site visitors.)


What are Forms?

Creating a form in a table

If you wish to arrange form elements in a table, you must disable automatic insertion of form tags with form elements before you add any form elements. (Disable [Insert > Form Field > Insert with Form Tags] if it is enabled.) The reason for doing this is that when you insert a form element in a table cell, Namo WebEditor create a new form inside the cell; and when you move to another cell and insert another form element, Namo WebEditor creates another new form inside the second cell; and so on. Since all the form elements in the table ought to be in the same form, you must prevent Namo WebEditor from creating a new form inside each cell by disabling automatic form tag insertion.

However, if you disable automatic form tag insertion, you must manually insert the form tags after inserting all the desired form elements in the table. To do this, select the table, and then use the [Format > Form] menu command. In the Form Properties dialog box, either specify the form settings now or just click OK to close the dialog box and specify the settings later. When you close the dialog box, form tags will be inserted around the table.


Inserting a one-line text box

The one-line text box allows a site visitor to input text. To add a one-line text box, do this:

  1. Select [Insert > Form Field > One-Line Text Box...] from the menu.
  2. Specify Name and Initial value. If Initial value has not been specified, the text box is displayed as blank.
  3. Specify the width of the text box by entering the number of characters in Width in Characters. Enter the maximum number of characters in Maximum length.
  4. Select an Input type. For most purposes, select Standard text. If you select Password, each character typed into the text box will be shown as an asterisk (*) rather than the actual character. If you select File name, a Browse button will be inserted next to the text box, allowing site visitors to select a file on their hard drive, of which the filename will be automatically entered into the text box. The default is standard text.
  5. Click Style... to apply any styles to the field.
  6. Click OK.
  7. If you wish to attach an action, open the Action window by selecting the [Window > Action] menu command or by pressing the shortcut key <Alt + 7>.
  8. Select the text box and click Add... in the Action window to apply any actions.

Example

  1. Place the cursor where you want to insert a one-line text box.
  2. Select the [Insert > Form Field > One-Line Text Box...] menu command.
  3. Enter 'name' in Name and leave Initial value blank, so that the text box is displayed empty.
  4. Set Width in Characters to '20', Maximum length to '20' and Input type to 'Standard text'.
  5. Click OK, and a one-line text box is inserted as follows.

  6. Type 'Name:' before the one-line text box.

    Name:
  7. You can modify the size of the text box by selecting the text box and dragging its resize handles. You can also modify the properties of the box in the One-Line Text Box Properties, which appears when you double-click the text box.

top


Inserting a check box

  1. Select the [Insert > Form Field > Check Box...] menu command.
  2. Specify Name and Value.
  3. Specify Initial state.
  4. Click Style... to apply any styles to the fields.
  5. Click OK.
  6. If you wish to attach an action, open the Action window by selecting the [Window > Action] menu command or by pressing the shortcut key <Alt + 7>.
  7. Select the check box and click Add... in the Action window to apply any actions.

Example

  1. Place the cursor where you want to insert a check box.
  2. Select the [Insert > Form Field > Check Box...] menu command.
  3. Set Name to 'editor' and Value to 'namo'.
  4. Set Initial state to 'Selected. Initial state refers to the state your Web browser displays when it loads the Web document.
  5. Click OK and the check box is inserted as follows.

  6. Type 'Namo WebEditor' after the check box.

    Namo WebEditor
  7. To modify the properties of a check box, double-click it. The Check Box Properties dialog box appears and you can make the desired modifications.

    Namo WebEditor


Inserting a scrolling text box

The scrolling text box allows a site visitor to enter more than one line of text. To add a scrolling text box, do this:

  1. Select the [Insert > Form Field > Scrolling Text Box...] menu command.
  2. Specify Name and Initial value. If Initial value has not been specified, the text box is displayed as blank.
  3. Enter the number of characters used as the box width in Width in characters, and the number of lines used as the line height in Number of lines.
  4. Click Style... to apply style to the field.
  5. Click OK.
  6. If you wish to attach an action, open the Action window by selecting the [Window > Action] menu command or by pressing the shortcut key <Alt + 7>.
  7. Select the scrolling text box and click Add... in the Action window to apply any actions.

The input type for the scrolling text box is always plain text.

Example

  1. Place the cursor where you want to insert a scrolling text box.
  2. Select the [Insert > Form Field > Scrolling Text Box...] menu command.
  3. Enter 'scroll' in Name and leave Initial value as blank, so that the text box will be displayed empty.
  4. Set Width in Characters to '20', and Number of lines to '5'.
  5. Click OK and a scroll text box is inserted as follows.

  6. You can modify the size of the scrolling text box by selecting the scrolling text box and dragging the resize handles. You can also modify the properties of the box in the Scrolling Text Box Properties dialog box, which appears when you double-click the scrolling text box.

top


Inserting radio buttons

Radio buttons are generally used to allow the site visitor to select just on item from a group of mutually exclusive items.

  1. Select the [Insert > Form Field >Radio Button...] menu command.
  2. Specify Name and Value.
  3. Specify whether the item should be initially selected in Initial state.
  4. Click Style... to apply style to the field.
  5. Click OK.
  6. If you wish to attach an action, open the Action window by selecting the [Window > Action] menu command or by pressing the shortcut key <Alt + 7>.
  7. Select the radio button and click Add... in the Action window to apply any actions.

Example

  1. Place the cursor where you want to insert a radio button.
  2. Select the [Insert > Form Field >Radio Button...] menu command.
  3. Set Name to 'editor' and Value to 'namo'.
  4. Set Initial state to 'Selected'. Initial state refers to the state your Web browser displays when it loads the Web document.
  5. Click OK and the radio button is inserted as follows.

  6. Type 'Namo WebEditor' after the radio button.

    Namo WebEditor
  7. To modify the properties of a radio button, double-click it. The Radio Button Properties dialog box appears and you can make any desired modifications.

    Namo WebEditor


Inserting a drop-down menu

  1. Select the [Insert > Form Field >Drop-Down Menu...] menu command.
  2. Enter the name of drop-down menu in Name.
  3. Click Add....
  4. In the Drop-Down Menu Settings dialog box, enter a Name and Value. To have the added item displayed as checked, choose Selected. Click Add... and repeat this step until you complete adding all the required drop-down menus.
  5. Specify Height. If you specify a number smaller than the number of items, a scroll bar appears.
  6. Select Allow Multiple selection check box if you wish.
  7. Click Style... to apply any styles to the fields.
  8. Click OK.
  9. If you wish to attach an action, open the Action window by selecting the [Window > Action] menu command or by pressing the shortcut key <Alt + 7>.
  10. Select the drop-down menu and click Add... in the Action window to apply any actions.

Example

  1. Place the cursor where you want to insert a drop-down menu.
  2. Select the [Insert > Form Field >Drop-Down Menu...] menu command.
  3. Enter 'Interest' in Name.
  4. Click Add....
  5. In the Drop-Down Menu Settings dialog box, set Name to 'News', Value to '1' and click OK.
  6. Click Add... again and enter 'Culture', '2', 'Sports', '3', and 'Science, '4' for Name and Value and click OK.
  7. Set Height to '1'.
  8. Click OK and a drop-down menu is inserted as follows.

  9. Type 'Interest:' before the drop-down menu.

    Interest:
  10. To modify the properties of a drop-down menu, double-click it. The Drop-Down Menu Properties dialog box appears and you can make any desired modifications.

    Interest:

top


Inserting a push button

A push button allows the site visitor to give the Web browser a command regarding the form, such as "Submit this form now" or "Clear this form". Sometimes, a button is used in combination with a JavaScript action that performs some function when the button is clicked.

To add a push button, do this:

  1. Select the [Insert > Form Field > Push Button...] menu command.
  2. Enter a name to identify the button in Name.
  3. In Value, enter the text to use as the button's label. If the button type is Submit, this value is also sent to the server.
  4. Select a Button type. If you set the type to Submit, the button will cause the values in the form to be sent to the server. If you set it to Reset, the button will cause the form to be cleared. If you set it to General, the button doesn't do anything by itself; it needs to have an attached JavaScript action that performs some function when the button is clicked.
  5. Click Style... to apply any styles to the fields.
  6. Click OK.
  7. If you wish to attach an action, open the Action window by selecting the [Window > Action] menu command or by pressing the shortcut key <Alt + 7>.
  8. Select the push button and click Add... in the Action window to apply any actions.

Example

  1. Place the cursor where you want to insert a push button.
  2. Select the [Insert > Form Field > Push Button...] menu command.
  3. Enter 'send' in Name, and 'Send' in Value.
  4. Select 'Submit' under Button type.
  5. Click OK and a push button is inserted as follows.

  6. To modify the properties of a push button, double-click it. The Push Button Properties dialog box appears and you can make the modifications as you wish.


Inserting an image form field

An image form field is an image that acts as a kind of submit button in a form. Like a standard submit button, when clicked, it causes the information in the form to be sent to the Web server. Unlike other submit button, however, an image form field also sends the X-Y coordinates of the point in the image where the site visitor clicked it. This information is sent in the following format:

    field_name.x = x_offset
    field_name.y = y_offset

For example, if the image form field's name is "imagebtn", the sent values might be:

    imagebtn.x = 92
    imagebtn.y = 30

To insert an image form field, do this:

  1. Select the [Insert > Form Field > Image...] menu command.
  2. Enter Name to identify the image form field.
  3. Enter the Path to the desired image file.

    Click Browse... to locate and select a file on your local drive, click Clip Art... to select an image from the Clip Art library, or click Site... to select an image file among the current site's documents.
  4. Set Vertical alignment. You can preview the layout through the small icon right next to the drop-down menu, which shows the position of the image form field and text.
  5. Specify the Size and Margins and borders.
  6. Click Style... to apply any styles to the fields.
  7. Click OK.
  8. If you wish to attach an action, open the Action window by selecting the [Window > Action] menu command or by pressing the shortcut key <Alt + 7>.
  9. Select the image form field and click Add... in the Action window to apply any actions.

Example

  1. Place the cursor where you want to insert an image form field.
  2. Select the [Insert > Form Field > Image...] menu command.
  3. Enter 'reply' in Name.
  4. In Path, click Clip Art... and select 'board_a_reply.gif' image file from General under Buttons in the Clip Art dialog box.
  5. Set Vertical Alignment to 'Middle'.
  6. Set Width to '33' pixels and Height to '40' pixels.
  7. Set Horizontal and Vertical margins to '1' pixel.
  8. Click OK and the image form field is inserted as follows.

  9. To modify the properties of the image form field, double-click it. The Image Form Field Properties dialog box appears and you can make any desired modifications.

top


Inserting a hidden form field

A hidden field is used to store a static value that is sent to the server along with the rest of the information in a form. However, it is invisible to the visitor. You might use a hidden field, for instance, to send the filename of the document containing the form.

  1. Select the [Insert > Form Field > Hidden Form Field...] menu command.
  2. Enter a Name to identify the hidden form field.
  3. Enter the Value that will be sent to the server.
  4. Click OK.

In the Edit window, a hidden form field is indicated by with a small yellow tag mark ( [image]) that looks like a partially obscured check box. This mark is not visible in a browser or the Preview window.


Modifying form properties

The Form Properties dialog box is where you specify, among other things, the server program that will handle the form.

  1. Select {Form Properties...} in the shortcut menu by right-clicking inside the form you have inserted in the Edit window.
  2. In the Form Properties dialog box, specify the Form name. This name is not sent to the server; it is only used to differentiate the form from others in the same document.
  3. When using frames, specify Target frame. If submitting the form results in a different Web document being opened by the browser, the target frame setting determines which frame or window the other document is opened in. Leave blank to use the same frame or window.
  4. Specify the path or URL of the form handler in Action. This is usually a CGI or other type of program on the server. If you enter 'mailto:' followed by an email address, the form content will be emailed by the browser to that address.
  5. Specify the method of transmitting the form contents to the server program in Method. The choices are GET and POST. If the form data will be saved by the server program, or if the form data will be e-mailed, choose POST. If in doubt, it is recommended to choose POST.
  6. Specify Encoding type. The Encoding type is the MIME type that the form contents should be treated as. If the contents are plain text, leave this blank or enter 'text/plain'.
  7. Click OK.

The Remove Form button may be used to remove the form tags of the current form. It does not remove the form fields.

If you activate the Show/Hide Special Tag Marks [image] on the Standard toolbar, the position of an inserted form tag (<form></form>) is displayed as a black dashed rectangle. In case the [Insert > Form Field > Insert with Form Tags] menu command is selected, a tag is inserted every time you insert a form field. If you do not want to insert a form tag along with a form field, do not select Insert with Form Tags from the menu.


Changing form field properties

  1. Double-click the form field you have inserted in the Edit window.
  2. The corresponding form field properties dialog box appears.
  3. Make the modifications you need and click OK.

If you activate Show/Hide Special Tag Marks [image] on the Standard toolbar, the position of an inserted form tag (<form></form>) is displayed as a black dashed rectangle. In case the [Insert > Form Field > Insert with Form Tags] menu command is selected, a tag is inserted every time you insert a form field. If you do not want to insert a form tag along with a form field, do not select Insert with Form Tags from the menu.


One-Line Text Box Properties dialog box

[Insert > Form Field > One-Line Text Box...],

A one-line text box is used to allow a site visitor to enter a small amount of text in a form.
  • Name
    Enter a name for the one-line text box. The name is used to distinguish this field from other fields in the same form.
  • Initial value
    Enter the text that will initially appear in the text box when the document is loaded in a browser. Leave blank to have nothing initially appear in the text box.
  • Width in characters
    Specifies the width of the text box in terms of character width. For example, enter 10 to make the text box the width of ten characters of average-width. Note that this is not an exact measure, so you may have to experiment with different values to get the intended width.
  • Maximum length
    Determines the maximum number of characters that can be entered in the text box.
  • Input type
    • Standard text | This input type is suitable for most uses.
Password | This input type displays each entered character as an asterisk ('*'). Useful for password fields.
Filename | This input type puts Browse... button to the right of the text box that can be used to select a file on the site visitor's local drives or network. The path to the selected file is automatically entered into the text box. However, the site visitor may enter anything they like into the text box; it is up to the server program to check if the contents of the text box are valid.
  • Style...
    Click to attach a CSS style to the text box using the Style dialog box.


Scrolling Text Box Properties dialog box

[Insert > Form Field > Scrolling Text Box...],

A scrolling text box is used to let a site visitor enter more text than would fit in a one-line text box.
  • Name
    Enter a name for the scrolling text box. The name is used to distinguish this field from other fields in the same form.
  • Initial value
    Enter the text that will initially appear in the text box when the document loads in a browser. Leave blank if you don't want any initial text.
  • Width in characters
    Specifies the width of the text box in terms of characters. For example, enter 10 to make the text box the width of ten characters of average-width. Note that this is not an exact measure, so you may have to experiment with different values to get the intended width.
  • Number of lines
    Specifies the height of the text box in number of lines. Note that this doesn't limit the amount of text the site visitor can enter.

    Example:

    Number of lines = 1

    Number of lines = 4

  • Style...
    Click to attach a CSS style to the text box using the Styles dialog box.


Check Box Properties dialog box

[Insert > Form Field > Check Box...],

A check box is used to let site visitors select or deselect an option in a form.
  • Name
    Enter a name for the check box. The name is used to distinguish this field from other fields in the same form.
  • Value
    Enter the value that will be submitted if the check box is checked.
  • Initial state
    Set to Checked if you want the check box to be checked by default.
  • Style...
    Click to attach a CSS style to the button using the Style dialog box.


Radio Button Properties dialog box

[Insert > Form Field > Radio Button...],

A radio button is used for making a selection when a site visitor must select only one item from among two or more choices.

  • Name
    Enter a name for the radio button. The name is used to distinguish this field from other fields in the same form.
  • Value
    Enter the value that will be sent to the server if the radio button is selected.
  • Initial state
    Choose the initial state of the radio button when the document is loaded in a browser. Set this to Selected if you want the radio button to be initially selected.
  • Style...
    Click to attach a CSS style to the button using the Style dialog box.


Drop-Down Menu Settings dialog box

[Insert > Form Field > Drop-Down Menu... - Add... button]

A drop-down menu is used in a form, and allows a site visitor to select an item from a list.
  • Name
    Enter the name of the item that will appear in the menu when viewed in a browser.
  • Value
    Enter the value that will be sent to the Web server when a site visitor selects the item.
  • Selected
    Specifies whether the item will be initially selected when the document is loaded in a browser.


Drop-Down Menu Properties dialog box

[Insert > Form Field > Drop-Down Menu...],

A drop-down menu is used in a form and allows a site visitor to select an item from a list.
  • Name
    Enter a name for the drop-down menu. The name is used to distinguish this field from other fields in the same form.
  • Add...
    Click the Add... button to open the Drop-Down Menu Setting dialog box, where you can add an item to the menu by entering a name and value. Check the Selected check box if you want this item to be selected initially.
  • Modify...
    Click to edit the selected menu item.
  • Remove
    Deletes the selected item.
  • Up
    Moves the selected item up one position in the menu.
  • Down
    Moves the selected item down one position in the menu.
  • Height
    Specify the height of the menu in number of lines. If a number greater than 1 is entered, the menu becomes a list box rather than a drop-down menu. If the height of a list box is smaller than the number of items, a scroll bar will appear at the right side of the list box.

    Examples:
  • Allow multiple selections
    Choose whether to allow selection of more than one item in the menu. This option only works if the menu is a list box. If the menu height is set as 1, enabling this option turns the drop-down menu into a one-line-high list box.

    Example:
  • Style...
    Click to attach a CSS style to the button using the Style dialog box.

top


Push Button Properties dialog box

[Insert > Form Field > Push Button...],

A push button is used to let the site visitor submit a form, clear a form, or submit a value to the Web server.
  • Name
    Enter a name for the push button. The name is used to distinguish this button from other buttons in the same form.
  • Value
    Enter the label that will appear on the button.
  • Button type
    • General | This type of push button is used simply to send a value to the server. It is often used together with JavaScript or Visual Basic.
Submit | Used for sending a completed form to the server.
Reset | Used to reset a form, clearing all entered information.
  • Style...
    Click to attach a CSS style to the button using the Style dialog box.


Image Form Field Properties dialog box

[Insert > Form Field > Image...],

When a site visitor clicks on an image form field, the coordinates of the click are sent to the Web server.
  • Name
    Enter a name for the image form field. The name is used to distinguish this field from other fields in the same form.
  • Path
    Enter the path or URL to the image file. Click Browse... to locate and select an image file on your local drive. Click Clip Art... to select an image from the Clip Art library. If you are working on a project, click Site... to select an image file from the current project.
  • Vertical alignment
    Specifies the alignment when an image is on the same line as text characters. Bottom sets the top of the character to the bottom of the image; Middle to the middle of the image; Top to the top. You can preview the layout, showing the position of the image form field and text, in a small icon right next to the drop-down menu.
  • Size
    • Width/Height | Optionally sets the width and height of the image as you wish it to appear in the document. Specify the width and height in pixels or as a percentage of the window size.
Restore Original Size | Click to restore the image size to the actual width and height of the image.
  • Margins and borders
    • Horizontal/Vertical | Optionally specifies a margin around the image, in pixels.
Border thickness | Sets the thickness of a blue border around the image, in pixels. Set to 0 for no border. This border appears only in Netscape.
  • Style...
    Click to attach a CSS style to the button using the Style dialog box.

top


Hidden Form Field dialog box

[Insert > Form Field > Hidden Form Field...],

Although not visible to the site visitor, the name and value of the field is sent to the Web server when the site visitor submits the form.
  • Name
    Enter a name for the hidden form field. The name is used to distinguish this field from other fields in the same form.
  • Value
    Enter a value to be sent to the Web server when the form is submitted.

In the Edit window, hidden form fields are marked with a small yellow icon that looks like a partially-obscured check box.


Form Properties dialog box

[Format > Form...], Form Properties

Information

Settings

Buttons

Information

  • Form name
    Enter a name for the form. It's a good idea to use a name that suggests the function or purpose of the form.
  • Target frame
    Usually, when a site visitor submits a form to the Web server, the result is displayed in the entire (same) browser window. If you want the result to be displayed in a specific frame instead, select the target frame from this menu.

Settings

  • Action
    Enter the URL to which the information in the form will be sent when the site visitor clicks the Submit button. If you leave this field blank, or if you enter a relative address, the base URL of the active document will be used. This is usually a CGI or other type of program on the server. If you enter 'mailto:' followed by an email address, the form content will be emailed by the browser to that address
  • Method
    Specifies the method for sending the data in the form. You can specify GET or POST. If the form data will be saved by the server program, or if the form data will be e-mailed, choose POST. If in doubt, it is recommended to choose POST.
  • Encoding type
    Assigns the type of MIME (Multipurpose Internet Mail Extensions) encoding to be applied to the form. MIME is the protocol used to send information other than plain text through the Internet. Using MIME, you can send and receive non-ASCII characters, images, sounds, multimedia files or other binary data types.

Buttons

  • Style...
    Click to specify styles for the form in the Style dialog box.
  • Remove Form
    Deletes everything entered in the Form Properties dialog box.

top


Web document and Script

What is a Script?

A script is a small program written directly into an HTML document. JavaScript and VBScript are the most commonly used script languages. Scripts are mainly used to give dynamic effects such as rollover buttons, scrolling text in the status bar, slide layer, and so on.

Scripts and HTML Documents

HTML is a markup language which was developed to display information. It does not provide any interactions between users and the document itself, nor does it display information dynamically. So we can say that HTML is very 'static'. Scripts cover these drawbacks of HTML. You can apply any dynamic effects that take place when an event occurs.

<Example> Enter numbers in the left two boxes and click on the button to multiply.

*
<Example> Click on the image below to see the text effect.


Working with Scripts in Namo WebEditor

Script Wizard and Actions

The Script Wizard is a step by step guides to add a dynamic effect chosen among 18 popular scripts. With minimal option settings, it automatically generates JavaScript code for the selected effect.

An action is also a script. Unlike the Script Wizard, you can choose various effects from 85 actions selectively, or even combine them to create more dynamic and complex effects.

Body Script and Document Script

If you are familiar with a script language, you can manually add scripts into your Web document. The Body Script, which is inserted in the 'head' of the HTML, applies to the entire document. On the other hand, the Document Script applies only to a specific part of the document and is inserted within the 'body'. You can insert these scripts directly into the HTML window, or select the [Insert > Script >Body Script... /Document Script...] menu command to insert them in the text box.

Script Manager

The Script Manager is a tool for managing objects and scripts attached to a Web document. It shows a tree of objects such as images or hyperlinks, and any scripts and actions applied to them. You can add, modify or delete actions and/or scripts easily using this tool.


The Script Wizard

The Script Wizard automatically generates JavaScript code necessary for the selected effect and inserts it into the HTML source of the Web document, enabling you to use popular JavaScript effects without writing a single line of code. The Script Wizard provides 18 different types of script effects.
  • Menu and Navigation
    • Text Menu | Makes a text menu, into which you can add various actions.
Drop-down Menu | Makes a drop-down menu that can contain multiple hyperlinks.
Expanding Navigation Menu | Makes a tree-structured menu which expands and collapses as you click on the menu with sublevel items.
  • Special Effects
    • Background Fade In/Out | Changes the background color gradually as you enter or exit the page.
Wipe Effect | Clears a document or a layer gradually by removing the colored cover over it.
Floating Layer | Makes a layer that remains still in the specific position even if you scroll the page.
Slide Layer | Makes a layer appear from the top or left edge of the window.
Mouse Trail | Makes layers trail the mouse pointer.
  • Scrollers
    • Marquee | Makes the contents in a layer flow from one side to the other.
Scrolling Text in a Box | Makes a line of text scroll in a text box.
Scrolling Text in the Status Bar | Makes text scroll in the status bar.
  • Image Effects
    • Rollover Effect | Replaces the current image with another image when the mouse pointer is placed over the image.
Animation Effect | Applies animation to a page element such as a paragraph or an image, causing it to move in a specified way when the page is loaded in a browser.
  • Link and Buttons
    • Link Button | Makes a button that moves you to the previous page, next page, or any other specific URL.
Rotating Banner | Makes a banner that changes its image and hyperlink periodically.
  • Utilities
    • Popup Window | Opens a new browser window when at a specific condition.
Clock | Shows the current time in a text box.
Access Information | Asks for visitor's name in a pop-up window, or shows information such as update information, the visitor's IP address, or the visitor's host name.


Text Menu

This script effect creates a text menu to which you can add various actions.

  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Menu and Navigation' from the categories and 'Text menu' from the scripts in the Select Script dialog box, and click Next.
  3. Select the Target layer. Select New to create a new layer.
  4. Click Add... to open Menu Item Settings dialog box.
  5. Enter an Item name and Target URL. Click Browse... , Site... , or Open Documents... to browse through files.
  6. Click OK, and the new item will be added to the list.
  7. Click Next.
  8. Specify the Background color, Border color, Font, Size, Font color, and Highlight color. Click Next.
  9. In the Menu Action dialog box, choose an action type from 'No motion', 'Sliding menu', and 'Floating menu', and click Finish.

Example

Place the mouse-pointer to the left edge of the window. A text menu will slide in. Click on the menu to move to the linked page.


Drop-down Menu

This script effect creates a drop-down menu that contains a list of multiple hyperlinks. Click one of the items in the drop-down menu to jump to the hyperlinked document.

  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Menu and Navigation' from the categories and 'Drop-down menu' from the scripts in the Select Script dialog box, and click Next.
  3. Click Add... and enter Item name and Target URL in the Menu Item Settings dialog box. Click Browse... , Site... , or Open Documents... to browse the files.
  4. Click OK and the new item will be added in the list box.
  5. Specify the Target frame where the linked document will open. Select '_self' if the current document has no frames. Specify the Height, which determines the number of lines to be displayed. If the number of listings is greater than the height, a scroll bar will appear.
  6. Change the sequence of the items, using the Up, Down buttons. Click Remove to delete the selected item from the list.
  7. Click Finish.

Example

Select an item from the following drop-down menu to move to the linked document.


Expanding Navigation Menu

This script effect inserts a tree-structured menu which expands and collapses as you click on it.

  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Menu and Navigation' from the categories and 'Expanding navigation menu' from the scripts in the Select Script dialog box, and click Next.
  3. Click Add... and enter an Item name, URL, and Target frame in the Menu Item Settings dialog box.
  4. Click OK, and the new item will be added in the sublevel of the selected item.
  5. Click Up and Down to change the sequence of the menu items. Click Remove to delete, and/or Modify... to modify the selected item. Item information will be displayed as you select an item under Menu item info.
  6. Click Next, and determine the menu's appearance in the Expanding Navigation Menu Appearance dialog box. Specify Font, Size, Text, Background while verifying the changes in the preview.
  7. Select Use rollover effect and specify Highlight color if you wish to make a rollover effect that changes the color of the menu when the mouse-pointer moves over it. Specify the Height and Indentation of the menu.
  8. Click Finish.

Example

Click on the menu to expand it. Click the sublevel items to move to the linked document.


Background Fade In/Out

This script effect changes the background color gradually as you enter or exit the page.

  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Special Effects' from the categories and 'Background fade in/out' from the scripts in the Select Script dialog box, and click Next.
  3. Specify which event will trigger the effect, from the Activate effect drop-down menu.
  4. Select the Enable fade effect check box.
  5. Specify the Starting color and Ending color under Properties. Specify the Number of steps. A higher value makes the effect slower.
  6. Click Finish.

Example

Right-click this document and select {Refresh} in the shortcut menu. The background color will change gradually.


Wipe Effect

This script effect makes a document or a layer visible by gradually clearing a colored cover.

  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Special Effects' from the categories and 'Wipe effect' from the scripts in the Select Script dialog box, and click Next.
  3. Select the target area.
  4. Select the Wipe effect type, and Wipe color while verifying the Preview.
  5. Click Finish.

Example

Right-click this document and select {Refresh} in the shortcut menu. You can check the vertical shutter type of wipe effect is applied to the image.

Wipe Effect


Floating Layer

This script effect keeps a layer in the same position, while the document containing it is scrolled.
  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Special Effects' from the categories and 'Floating layer' from the scripts in the Select Script dialog box, and click Next.
  3. Select a target layer from the Target layer drop-down menu. Select No floating effect to disable the floating layer effect. Select Float at the current position to place the layer at the current position.
  4. You can also specify the floating location using the radio buttons in Float at.
  5. Click Finish.

Example

The layer will float in the bottom-right section of the window. Reduce the window size and scroll the page to view this effect.

Floating Layer


Slide Layer

This script effect makes a layer appear from the top or left edge of the window.

  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Special Effects' from the categories and 'Slide layer' from the scripts in the Select Script dialog box, and click Next.
  3. Select Target layer from the drop-down menu.
  4. Specify the direction from which the sliding layer appears.
  5. Select No slide effect to disable the slide layer effect. If you select Original position, the sliding layer appears from the current position of the layer. Place the layer to the left or top of the window before using this option.
  6. Click Finish.

Example

Place the mouse-pointer to the left edge, and a layer will slide in.

Slide Layer


Mouse Trails

This script effect causes layers to trail the mouse-pointer.

  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Special Effects' from the categories and 'Mouse trails' from the scripts in the Select Script dialog box, and click Next.
  3. Select a layer in the drop-down menu and click Add. Repeat this operation to add multiple layers to the list.
  4. Use Up and Down button to change the sequence of the layers.
  5. Click Remove to delete the selected layer from the list.
  6. Click Finish. You can verify the script effect in the Preview window.
  7. Click Remove Script to if you wish to remove the mouse trails effect.

Make layers that you wish to trail the mouse pointer before you insert the mouse trails effect into the Web page.


Marquee

This script effect makes the contents in the layer flow from one side to the other.

  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Scrollers' from the categories and 'Marquee' from the scripts in the Select Script dialog box. Click Next.
  3. Select the Target layer and Scroll direction. Or, select No effect to disable the marquee effect.
  4. Select the type of flow from the Behavior drop-down menu.
  5. Specify the Scroll stride, which is the amount of the movement in one step. A higher value speeds up the movement of the content.
  6. Specify Scroll delay,which is the time between the steps of the scrolling motion. The smaller the value, the faster and smoother the scrolling becomes.
  7. Specify Visible length. Click the Fit to Layer [image] button to make the visible length equal to the width or height of the layer.
  8. Specify the number of times the marquee to scroll under Repetitions.
  9. Click Finish.

For a bi-directionally scrolling marquee to work correctly, the visible length must be greater than the actual length of the layer. If the visible length is equal to the actual length, all the contents are always in view, and no scrolling effect will be realized.

Example

The image and the text in a layer flow to the right.

Marquee


Scrolling Text in a Box

Makes a line of text scroll within a text box.

  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Scrollers' from the categories and 'Scrolling Text in a Box' from the scripts in the Select Script dialog box, and click Next.
  3. Specify the Form name and Form field name. Enter some text that will scroll within the text box, and determine the Scrolling period.
  4. Click Finish.

Example

  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Scrollers' from the categories and 'Scrolling Text in a Box' from the scripts in the Select Script dialog box, and click Next.
  3. Enter 'form1' for Form name, and 'scrolltext1' for Form field name. In the Scrolling text enter 'Namo WebEditor 5 Scrolling text in a box', and set '50' as the Scrolling period.
  4. Click Finish.


Scrolling Text in the Status Bar

This effect inserts scrolling texts in the status bar.

  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Scrollers' from the categories and 'Scrolling text in the status bar' from the scripts in the Select Script dialog box, and click Next.
  3. Enter texts in Text 1, Text 2, and Text 3. The Texts 1, 2, 3 will scroll sequentially in the status bar.
  4. Click Finish.

Example

  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Scrollers' from the categories and 'Scrolling text in the status bar' from the scripts in the Select Script dialog box, and click Next.
  3. Insert 'Namo WebEditor 5' in Text 1, and 'Scrolling text in the status bar' in Text 2.
  4. A string of texts 'Namo WebEditor 5 Scrolling text in the status bar' will scroll in the status bar of the Web browser.


Rollover Effect

This script effect creates a rollover effect on an image. The image will be replaced by another image when the mouse pointer is "rolled over" the image.
  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Image Effects' from the categories and 'Rollover effect' from the scripts in the Select Script dialog box, and click Next.
  3. Enter a name for the rollover effect. Specify First image path and Second image path.
  4. You can see the rollover effect in the Preview window.
  5. Click Remove Rollover Effect to remove the effect from the document. Click Hyperlink... to add a hyperlink to the rollover image.

The name must begin with a letter, and may contain letters, numbers,and underscores (_). Spaces and symbols cannot be used.

Example

Move the mouse pointer over the image to see rollover effect.


Animation Effect

This script effect moves an image, text, or a layer within the window. This effect only works on a paragraph or an existing layer. Even if you select just one word in a paragraph, the effect will operate on the entire paragraph containing the word. When applying the effect to a paragraph, the Script Wizard will create a hidden layer to which the effect will be attached. In such cases, default name for the new layer will be provided. (Unlike normal layers, a hidden layer cannot be resized or freely moved, nor does it appear in the Layer List window.)

  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Image Effects' from the categories and 'Animation effect' from the scripts in the Select Script dialog box, and click Next.
  3. Specify the layer in Animation layer name and its Starting position. Select the Trace type while verifying the changes made in the Preview area.
  4. Specify the Starting condition, Starting time, and Total steps. A higher value for Total steps causes slower movement.
  5. Select the Zoom in/out option, and select Word by word if you wish to move the words separately.
  6. Click OK, and the Script Wizard icon will be attached to the layer in the Edit window.

The animation effect ends at the current position of the object in the Edit window.

The animation effect is applied to the paragraph where the cursor is placed. The animation will affect the entire paragraph, including lines separated by the <Shift + Enter> key.

Example

Right-click this document and select {Refresh} in the shortcut menu. You can see the car move from left to right.

Animation Effect


Link Button

This script effect inserts a link button that leads you to the previous page, next page, or other specified URL.

  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Links and Buttons' from the categories and 'Link button' from the scripts in the Select Script dialog box, and click Next.
  3. Enter a name for the link button in the Button label text box.
  4. Select URL to specify the target URL or filename of the link. Click Site..., Open documents..., or Browse... to browse through files.
  5. Click the Back or Forward radio button to create a link to the previous page or next page, respectively.
  6. Specify the Target frame where the linked document will open. Select '_self' if the current document has no frames.
  7. Click Finish.

Example

Click the button to the Script Wizard help file.

Click the buttons to move back and forth. The buttons play the same role as the Back, Next buttons in the Web browsers.


Rotating Banner

Creates a banner that changes its image and hyperlinks periodically.

  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Link and Buttons' from the categories and 'Rotating banner' from the scripts in the Select Script dialog box, and click Next.
  3. Select the Target image from the drop-down menu.
  4. Click Add... to open the Rotating Banner Item Settings dialog box.
  5. Enter the path of the banner image in Image, and the URL of the hyperlink in Target URL.
  6. Click OK to add the new item to the list.
  7. Specify the Interval by which the banner images change.
  8. Click Finish.
  9. Click Remove Script to remove rotating banner effect.


Pop-up Window

This script effect opens a popup window.

  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Utilities' from the categories and 'Popup window' from the scripts in the Select Script dialog box, and click Next.
  3. Select an event to trigger the pop-up window effect from the Apply when drop-down menu. Enter a name for the window and the URL of the pop-up window. Click Site..., Open Documents..., or Browse... to browse through files.
  4. Enter values for Left margin , Top margin , Width, Height to specify the size and position of the pop-up window.
  5. Select whether to display the toolbar, menu, scroll bar, status bar, and whether to make the window resizable under Options.
  6. Click Finish. You can verify the script effect in the Preview window
  7. Click Remove Script if you wish to remove the pop-up window effect.

The Window name must begin with a letter, and may contain letters, numbers, and underscores (_). Spaces and symbols cannot be used.

Example

Right-click this document and select {Refresh} in the shortcut menu. A pop-up window will open.


Clock

This script effect displays the current time in the document.

  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Utilities' from the categories and 'Clock' from the scripts in the Select Script dialog box, and click Next.
  3. Insert the Form name and Form field name.
  4. Select the Time format.
  5. Click Finish. The clock will not operate in the Edit window.

If you wish to change the size of the text box, select it, and drag the resizing handles.

The time displayed in the text box is same as the server's system time. Therefore ensure that the system time of the server is correct. When checking in the Preview window, the time of the local system will be shown, as the Preview window has no connection to the remote site.

Example


Access Information

This script effect creates a script that either opens a pop-up window which asks for the visitor's name, or shows information such as update information, visitor's IP address, or visitor's host name.

  1. Select the [Insert > Script > Script Wizard...] menu command, or click Insert Script Wizard Effect [image] on the Standard Toolbar.
  2. Select 'Utilities' from the categories and ' Access information' from the scripts in the Select Script dialog box, and click Next.
  3. Enter the Form name and Form field name.
  4. Select the Information type you wish to display.
  5. Click Finish.

Example

Asks for visitor's name upon opening the page. The entered name will be shown in the one-line text box.

Displays the last update information.


Mouse Trail Layer dialog box

Mouse Trails dialog box

[Insert > Script > Script Wizard>Special Effects - Mouse trails]

Mouse trail layer list

Displays a list of mouse trail layers.

Layer drop-down menu

Shows a list of layers inserted in the document.

Buttons

  • Add
    Adds the selected layer in the drop-down menu to the mouse trail layer list.
  • Remove
    Removes the selected layer from the mouse trail layer list.
  • Up
    Moves the selected layer one step higher in the mouse trail layer list.
  • Down
    Moves the selected layer one step lower in the mouse trail layer list.

Remove Script

Disables the effect and removes the script from the HTML source.


Menu Action dialog box

[Insert > Script > Script Wizard... > Menu and Navigation - Text menu > Format Menu > Menu Action]

No motion

If this option is selected, no special effect will be applied to the text menu.

Pop-up menu

Makes the text menu appear or disappear, whenever a specified hyperlink is clicked. The hyperlink will work as a switch to open and close the 'pop-up' menu.

  • Activating hyperlink
    Shows a list of hyperlinks inserted in the document. If you click the selected hyperlink in the window, a pop-up menu will appear.

The pop-up menu, which is available only in Internet Explorer, is enabled only when there is a hyperlink in the document.

Sliding menu

Applies the slide layer effect to the menu.

  • Left side of the browser window - The sliding layer appears from the left when you move the mouse pointer toward the left edge of the window.
  • Top side of the browser window - The sliding layer appears from the top when you move the mouse pointer toward the top edge of the window..
  • Original position - The sliding layer appears from the current position of the layer. Place the layer to the left or top of the window before using this option.

Floating menu

Applies the floating layer effect to the menu. The menu will stay still ("float") in the window.

  • Original position
    The text menu will be floated in the specified position regardless of mouse movement.
  • Top left
    The text menu is located in the top-left part of the browser window.
  • Top
    The text menu is located at the top of the browser window.
  • Top right
    The text menu is located in the top-right part of the browser window.
  • Bottom left
    The text menu is located in the bottom-left part of the browser window.
  • Bottom
    The text menu is located at the bottom of the browser window.
  • Bottom right
    The text menu is located in the bottom-right part of the browser window.


Format Menu dialog box

[Insert > Script > Script Wizard... > Menu and Navigation - Text menu > Format Menu]

Preview

Shows a preview of the menu.

Background color

Specify the menu's background color.

Border color

Specify the menu's border color.

Font

Specify the font for the menu's text.

Size

Specify the font size. The default size is 12pt.

Font color

Specify the text color.

  • Underline - Check to underline the text.

Highlight color color (Only in IE)

Specify the highlight color, or the color that is displayed as the mouse pointer moves over the text. Available only in Internet Explorer.

  • Underline - Check to underline the text.


Script Wizard - Select Script dialog box

[Insert > Script > Script Wizard...], <Alt+Shift+W>,

Select a category

Shows the categories of script effects. Select from Menu and Navigation, Special Effects, Scrollers, Image Effects, Link and Buttons, and Utilities.

Select a script

Shows a list of script effects that are included in the selected category.

  • Menu and Navigation : Select from 'Text menu', 'Drop-down menu', 'Expanding navigation menu'.
  • Special Effects :Select from 'Background fade in/out', 'Wipe effect', 'Slide layer', 'Floating layer', 'Mouse trails'.
  • Scrollers : Select from 'Marquee', 'Scrolling text in a box', 'Scrolling text in the status bar'.
  • Image Effects : Select from 'Rollover effect', 'Animation effect'.
  • Link and Buttons : Select from 'Link button',and 'Rotating banner'.
  • Utilities : Select from 'Pop-up window', 'Clock', and 'Access information'.

Preview

Displays a preview of the script effect.

Description

Displays a brief description on the script effect.


Pop-up Window dialog box

[Insert > Script > Script Wizard... > Utilities - Pop-up window]

Apply when

Select, from this drop down menu, the event that will cause the new window to open. There are two available event types: the new window can be opened as soon as the current document is loaded in a browser, or it can be opened when a specified link in the document is used. All links in the current document will appear in the drop-down menu.

Window name

Enter a name for the pop-up window. The window name must begin with a letter, and may contain letters, numbers, and underscores (_). Spaces and symbols cannot be used.

Target URL

Enter the target URL, or path of the document that will open in the pop-up window.

  • Browse...
    Click to select the URL from the Open dialog box.
  • Open Documents...
    Click to select the URL from the files that are currently open.
  • Site...
    Click to select the URL from the site in the Select File dialog box. Enabled when site is open.

Position and size

  • Left margin/Top margin
    Specify the position of the top-left corner of the pop-up window. '0' is default for both values.
  • Width/Height
    Specify the size of the pop-up window. The default size is '300' pixels in width, and '200' pixels in height.

Options

  • Show toolbar
    Check to display the toolbar which contains the Back, Forward, Home, Refresh buttons.
  • Show menu
    Check to display menus.
  • Resizable
    Check to make the window resizable.
  • Show scroll bar
    Check to display scroll bars.
  • Show status bar
    Check to display the status bar.

Remove Script

Disables the effect and removes the script from the HTML source.


Rollover Effect dialog box

[Insert > Script > Script Wizard... > Image Effects - Rollover effects]

Name

Enter a name for the rollover effect. The name must begin with a letter, and may contain letters, numbers, and underscores (_). Spaces and symbols cannot be used.

First image path

This is the path to the first image file. This is an image that is seen in a browser even when the mouse pointer is not over the image. If you selected an existing image in the document, its path is automatically entered here.

Click Browse... to select an image file in the Open dialog box.

Click Clip Art... to select an image file from the Clip Art tab of the Resource Manager.

Click Site... to select an image file from the site in the Select File dialog box.

Second image path

This is the path to the second image file. This is the image that is seen in a browser when the mouse pointer is over the image.

Click Browse... to select an image file in the Open dialog box.

Click Clip Art... to select an image file from the Clip Art tab of the Resource Manager.

Click Site... to select an image file from the site in the Select File dialog box.

Preview

Shows a preview of the rollover effect. Move the mouse pointer over the image to preview the effect.

Remove Rollover Effect

Removes the rollover effect.

Hyperlink...

Allows a hyperlink to be added to the rollover image.


Script Manager

[Window > Script Manager...]

  • Object list
    Shows a list of the objects inserted in the document.
  • Action Window
    • Event | Shows the events related to the actions which are applied to the selected object.
Action | Shows a list of actions which are applied to the selected object.
Add... | Click to add a new action in the Action Properties dialog box.
Modify... | Click to modify the action in the Action Properties dialog box.
Remove | Removes the selected action from the document.
  • Script Wizard Effects
    Shows the script effect applied to the object selected in the object list.

    • Remove

    Removes the selected script effect from the document.


Scrolling Text in a Box dialog box

[Insert > Script > Script Manager... > Scrollers - Scrolling text in a box]

Form name

The Script Wizard must create a form to contain the scrolling text box. The form requires a name to distinguish it from any other forms in the document. Use the default name unless you wish to specify another unique name.

Form field name

A text box is a type of form field. All form fields must have names to distinguish them from one another. Use the default name unless you wish to specify another unique name.

The form name and the form field name must begin with a letter, and may contain letters, numbers, and underscores (_). Spaces and symbols cannot be used.

Scrolling text

Enter the text that will appear in the scrolling text box.

Scrolling period

Controls how quickly the text scrolls. The smaller the value, the faster the text will scroll.


Scrolling Text in the Status Bar dialog box

[Insert > Script > Script Wizard... > Scrollers - Scrolling text in the status bar]

Text 1

Enter the text that first appears in the status bar.

Text 2

Enter the text that appears next to Text 1.

Text 3

Enter the text that appears next to Text 2.

Text 1, 2, 3 will appear sequentially on the status bar.

Remove Script

Disables the effect and removes the script from the HTML source.


Slide Layer dialog box

[Insert > Script > Script Wizard... > Special Effects - Slide layer]

Target layer

Select the layer to which the effect will be applied. At least one layer must already exist in the document before you can apply the Slide layer effect.

Slide layer position

Specify the direction from which the sliding layer will appear.

  • No slide effect
    Disables the slide effect and removes the script from the HTML source.
  • Left side of the browser window from the original position
    The sliding layer appears from the left when you move the mouse pointer toward the left edge of the window where the target layer is placed.
  • Top side of the browser window from the original position
    The sliding layer appears from the top when you move the mouse pointer toward the top edge of the window where the target layer is placed.
  • Original position
    The sliding layer appears from the current position of the layer. Place the layer to the left or top of the window before using this option.


Text Menu dialog box

[Insert > Script > Script Wizard... > Menu and Navigation - Text menu]

Target layer

Select a layer with which you wish to make the text menu. Select New to create a new layer.

Menu item list

Shows a list of the items in the menu.

  • Item name
    Shows the Item name specified in the Menu Item Settings dialog box.
  • Target URL
    Shows the Target URL specified in the Menu Item Settings dialog box.
  • Target frame
    Shows the Target frame of the selected menu item, specified in the Menu Item Settings dialog box.

Buttons

  • Up
    Moves the selected item one step higher.
  • Down
    Moves the selected item one step lower.
  • Add...
    Click to add a new item to the menu in the Menu Item Settings dialog box.
  • Modify...
    Click to modify the menu.
  • Remove
    Removes the selected item from the list.


Rotating Banner dialog box

[Insert > Script > Script Wizard...> Link and Buttons - Rotating banner]

Target image

Select the target image to use as the rotating banner. Select 'New' to insert a new image.

Banner information window

Shows a list of existing banners.

  • Image
    Shows the path of the image you have selected in the Rotating Banner Item Settings dialog box.
  • Target URL
    Shows what was inserted under Target URL in the Rotating Banner Item Settings dialog box.
  • Target frame
    Shows the Target frame of the selected menu item, specified in the Menu Item Settings dialog box.

Buttons

  • Up
    Moves the selected banner image one step higher.
  • Down
    Moves the selected banner image one step lower.
  • Add...
    Click to add a new banner image to the list. The Rotating Banner Item Settings dialog box opens.
  • Modify...
    Click to modify the selected banner item settings in the Rotating Banner Item Settings dialog box.
  • Remove
    Click to delete the selected banner image.

Interval

Specify the intervals by which the banner images change.

Remove Script

Disables the rotating banner effect and removes the script from the HTML source.


Rotating Banner Items Settings dialog box

[Insert > Script > Script Wizard...> Link and Buttons - Rotating banner -Add.../Modify...]

Image

Specify the banner image. It will be displayed in the Banner information window.

Click Browse... to select an image file in the Open dialog box.

Click Clip Art... to select an image file from the Clip Art tab of the Resource Manager.

Click Site... to select an image file from the site in the Select File dialog box.

Target URL

Specify the URL of the link.

Click Browse... to select an image file in the Open dialog box.

Click Clip Art... to select an image file from the Clip Art tab of the Resource Manager.

Click Site... to select an image file from the site in the Select File dialog box.

Target frame

If the current document uses frames, select the frame in which the target of the menu item selected by the site visitor will load. In addition to listing the frames of the current document by name, the Target frame menu also contains these standard frame references:
  • _blank - The target document will load in a new browser window.
  • _parent - The target document will load in the parent frame of the frame containing the drop-down menu. This is usually the entire browser window, but if the current document was loaded into a frame of another document, then select this option to have the target document replace the current document in the same frame.
  • _self - The target document will load in the frame containing the drop-down menu.
  • _top - The target document will load in the entire browser window, even if the current document was loaded into a frame.


Access Information dialog box

[Insert > Script > Script Wizard... > Utilities - Access information]

Form name

The Script Wizard must create a form for containing the text box used to display the access information. The form must have a unique name, to distinguish it from any other forms in the document. Enter a name for the form here, or simply accept the default name generated by the Script Wizard.

Form field name

A text box is a type of form field. All form fields must have names to distinguish them from one another. Enter a name for the text box here, or simply accept the default name generated by the Script Wizard.

The form name and the form field name must both begin with a letter and may only contain letters, numbers, and underscores (_). Spaces and symbols cannot be used.

Information type

  • Visitors name
    Creates a script that opens a dialog box when the current document is loaded in a visitor's browser. The dialog box prompts the site visitor for information, such as his or her name. The information supplied by the visitor then appears in a one-line text box.
  • Last modification date and time
    Creates a one-line text box that displays the date that the current document was last modified (saved).
  • Visitor's IP address (Netscape only)
    Creates a one-line text box that displays the visitor's IP address.
  • Visitor's host name (Netscape only)
    Creates a one-line text box that displays the visitor's host name.


Animation Effect dialog box

[Insert > Script > Script Wizard... > Image Effects - Animation effect]

Animation layer name

Enter a name for the layer, image, or text to which you wish to apply an animation effect. 'alayer1' is provided as default. The name must begin with a letter and may only contain letters, numbers, and underscores (_). Spaces and symbols cannot be used.

Starting position

Specify the location in the browser window where the animation will start. The available starting positions are the four corners of the window and the points at the center of its four edges.

The ending position of the animation is the location of the paragraph or layer, as viewed in the Edit window.

Trace type

Decide the type of movement for the animated object.

  • Line
    Moves the item in a straight line from the starting position to the ending position.
  • Curve
    Moves the item in a smooth curve through ninety degrees from the starting position to the ending position.
  • Spiral
    Moves the item in a spiral from the starting position to the ending position.

No animation

Disables the animation effect and removes the script from the HTML source.

Starting condition

Specify when to start the animation effect. The default is set as 'Upon loading page'. If there are any other animation effects, they will be listed in a drop-down menu allowing you to decide their sequence.

Total steps

Specify the total number of steps to make image, text, or layer scroll. The larger the value is, the slower the speed of the animation effect will be.

Starting time

Specify, in milliseconds, how much time should elapse after the starting condition has been met before the animation begins.

Preview

Shows a rough preview of what the animation will look like.

IE only

You may add the following functions, available only for Internet Explorer.

  • Zoom in/out
    • Zoom In | Enlarges the object as the animation proceeds.
Zoom out | Reduces the object as the animation proceeds.
  • Word by word
    If the text in the paragraph or layer contains more than one word, this option makes the animation proceed word by word: the first word will move from the starting position to the ending position, followed by the second word, and so forth.

Insert the text or image to which you wish to apply the animation effect, before specifying properties in the Script Wizard.

An animation effect is applied to the paragraph where the cursor is placed. The animation will affect the entire paragraph, including lines separated by the <Shift + Enter> key. If you wish to apply multiple animation effects to a single paragraph, insert an extra layer which includes the paragraph.


Body Script dialog box

[Insert > Script > Body Script...],

  • Script language type
    Select or enter the script type you wish to use for a script effect. JavaScript is selected by default.
  • Scripts enclosed within the <BODY> tags
    Enters the scripts between <!-- JavaScript and // - JavaScript - --> tags.

Comment tags are implemented to ignore the scripts, if the browser does not support the specific script language.


Expanding Navigation Menu Appearance dialog box

[Insert > Script > Script Wizard... > Menu and Navigation - Expanding navigation menu > Expanding navigation menu appearance]

Menu item list

Shows a list of menus made in the Menu Item Settings dialog box. Select an item, and the properties will be enabled for modification.

If you make changes to a particular item, the same properties will be applied to all items at the same level. However, modification of a certain level does not affect menus at other levels.

Font

Select the font for the menu.

Size

Specify the size of the text.

Text

Specify the color of the text.

Background

Specify the background color of the menu.

Highlight

Specify a color for the rollover effect. Click Use rollover effect check box to the enable rollover effect.

  • Use rollover effect
    If you use the rollover effect, the color of the menu changes as the mouse pointer is moved over the menu. Enable this effect by selecting the Use rollover effect check box.

Height

Specify the height of the menu.

Indent

Specify the amount of indentation for the menu name.

Preview

You may specify the properties of the menu as you view the preview.


Link Button dialog box

[Insert > Script > Script Wizard... > Link and Buttons - Link button]

Button label

Enter a name that will appear on the button.

Target

  • URL
    Enter the URL of the link.
    • Browse... | Browse in the Open dialog box.
Open Documents... | Select from the files that are currently open.
Site... | Select from the site in the Select File dialog box. Enabled when site is open.
  • Back
    Moves to the previous page, as if the Back button of the Web browser was clicked.
  • Forward
    Moves to the next page, as if the Forward button of the Web browser was clicked.

Target frame

If frames are used, select the frame in which the target of the menu item selected by the site visitor will load. In addition to listing the frames of the current document by name, the Target frame menu also contains these standard frame references:
  • _blank - The target document will load in a new browser window.
  • _parent - The target document will load in the parent frame of the frame containing the drop-down menu. This is usually the entire browser window. However, if the current document was loaded into a frame of another document, then select this option to have the target document replace the current document within the same frame.
  • _self - The target document will load in the frame containing the drop-down menu.
  • _top - The target document will load in the entire browser window, even if the current document was loaded into a frame.


Marquee dialog box

[Insert > Script > Script Wizard... > Scrollers - Marquee]

Target layer

Select the layer to which the effect should be applied. If the current document contains no layers, this script will have no effect.

Scroll direction

Select the direction of the flow.

  • No effect
    Disables the effect and removes the script from the HTML source.
  • Left
    Makes the layer contents flow leftward.
  • Right
    Makes the later contents flow rightward.
  • Up
    Makes the layer contents flow upward.
  • Down
    Makes the layer contents flow downward.

Behavior

Select the type of effect.

  • Unidirectional scroll
    The layer contents will scroll in the specified direction until all of the contents have moved across the full length of the layer. If the number of repetitions is greater than 1, the process will repeat as many times as specified.
  • Bidirectional scroll
    The layer contents will scroll in the specified direction until the "last" of the contents has just come into view. Then they will scroll in the opposite direction until the "first" of the contents has again come into view. This process is repeated continuously; the value specified in Repetitions is ignored.
  • Sequential scroll
    The layer contents will scroll in the specified direction until the "first" of the contents reaches the "far" side of the layer, then the contents will disappear all at once. This process will be repeated as many times as specified in Repetitions.

Scroll stride

Specify the size of the steps in the scrolling motion of the marquee. For example, if you enter 5, the marquee will scroll five pixels at a time. The larger the value, the faster the contents will scroll.

Scroll delay

Specify, in thousandths of a second, the amount of time between the scrolling motion steps. For example, if you enter 100, the marquee will scroll one step every 1/10th of a second. Smaller values enable faster scrolling. The minimum value is 10.

Visible length

Specify the length of the marquee. ("Length" means width if the marquee scrolls horizontally; height if it scrolls vertically.) If you set the visible length to be shorter than the layer's actual length, you will not be able to see all the contents at once. Click the Fit to Layer [image] button to make the visible length the same as the width or height of the layer.

For a bidirectionally scrolling marquee to work correctly, the visible length must be longer than the actual length of the layer. If the visible length is equal to the actual length, all of the contents are continually in view, thereby not realizing the scrolling effect.

Repetitions

Specifies the number of times the scrolling effect will repeat.
  • -1
    The marquee effect will repeat continuously.
  • 0
    Disables the marquee effect.
  • 1 or more
    Repeats as many time as specified.

For Sequential scroll, if '-1' is entered in Repetitions, the effect will run no more than once. If the value is '1' or more, it will repeat as many time as specified.


Menu Item Settings dialog box

[Insert > Script > Script Wizard... > Menu and Navigation - Text menu/ Drop-down menu/ Expanding navigation menu - Add.../Modify...]

Item name

Enter an item name that will be displayed in the Web browser.

Item names inserted in this dialog box appear in the Text menu, Drop-down menu, and Expanding navigation menu.

Target URL

Specify the URL of the link.

Browse in the Open dialog box.

Select from documents that are currently open in the Edit window.

Select from the site in the Select File dialog box. Enabled when site is open.

Target frame

If frames are used, select the frame in which the target of the menu item selected by the site visitor will load. In addition to listing the frames of the current document by name, the Target frame menu also contains these standard frame references:
  • _blank - The target document will load in a new browser window.
  • _parent - The target document will load in the parent frame of the frame containing the drop-down menu. This is usually the entire browser window. However, if the current document was loaded into a frame of another document, then select this option to have the target document replace the current document within the same frame.
  • _self - The target document will load in the frame containing the drop-down menu.
  • _top - The target document will load in the entire browser window, even if the current document was loaded into a frame.


Wipe Effect dialog box

[Insert > Script > Script Wizard... > Special Effects - Wipe effect]

Select the target area for this effect

Specify where to apply the wipe effect.

  • No wipe effect
    Disables the wipe effect and removes the script from the document source.
  • Entire window
    Applies the wipe effect to the entire window.
  • Layer
    Applies the wipe effect to the layer that is selected from the drop-down menu. (This option will be unavailable if the document does not contain at least one layer.)

Wipe effect type

Select the desired type of wipe effect. A preview will be displayed on the right.

  • Puzzle
    Clears the window or layer by randomly removing rectangular sectors that cover the whole area.
  • Horizontal blinds
    Clears the window or layer as if opening a horizontal blind.
  • Vertical blinds
    Clears the window or layer as if opening a vertical blind.
  • Edge to center
    Clears the window or layer by removing a cover inward, starting from the boundaries.
  • Center to edge
    Clears the window or layer by removing a cover outward, starting from the center.
  • Vertical shutter
    Clears the window or layer horizontally, starting from the center and advancing to both sides, as if opening a curtain.
  • Horizontal shutter
    Clears the window or layer vertically, starting from the center and advancing to both top and bottom edges.

Wipe color

Select the color that covers the window before starting the wipe effect.

Preview

Shows a preview of the wipe effect.


Clock dialog box

[Insert > Script > Script Wizard... > Utilities - Clock]

Form name

In order to display the clock, the Script Wizard must create a form containing a single text box. This form must have a unique name, to distinguish it from any other forms that might exist in the document. Enter a name for the form here, or simply accept the default name generated by the Script Wizard.

Form field name

Enter a name for the one-line text box that will contain the clock. You can simply accept the default name generated by the Script Wizard.

The form name and form field name must begin with a letter and may only contain letters, numbers, and the underscores (_). Spaces and symbols cannot be used.

Time format

Select the date/time format to be displayed.


Document Script dialog box

[Insert > Script > Document Script...]

  • Script language type
    Select or enter the script type you wish to use for the script effect. JavaScript is selected by default.
  • Scripts enclosed within the <HEAD> tags
    Enters scripts between <!-- JavaScript and // - JavaScript - --> tags.

Comment tags are implemented to ignore the script if the browser does not support the specific script language.


Drop-down Menu dialog box

[Insert > Script > Script Wizard... > Menu and Navigation - Drop-down menu]

Drop-down menu list

  • Item name
    Shows the Item name inserted in the Menu Item Settings dialog box.
  • Target URL
    Shows the Target URL inserted in the Menu Item Settings dialog box.

Buttons

  • Up
    Moves the selected item one step up in the Drop-down menu list.
  • Down
    Moves the selected item one step down in the Drop-down menu list.
  • Add...
    Click to open the Menu Item Settings dialog box, where you can add an item to the list. Enter the Item name and Target URL.
  • Modify...
    Click to modify the selected item in the list. Change the Item name and/or Target URL in the Menu Item Settings dialog box.
  • Remove
    Removes the selected item from the Drop-down menu list.

Target frame

If frames are used, select the frame in which the target of the menu item selected by the site visitor will load. In addition to listing the frames of the current document by name, the Target frame menu also contains these standard frame references:
  • _blank - The target document will load in a new browser window.
  • _parent - The target document will load in the parent frame of the frame containing the drop-down menu. This is usually the entire browser window. However, if the current document was loaded into a frame of another document, then select this option to have the target document replace the current document within the same frame.
  • _self - The target document will load in the frame containing the drop-down menu.
  • _top - The target document will load in the entire browser window, even if the current document was loaded into a frame.

Height

Specify the height of the drop-down menu. If you specify a height greater than 1, the drop-down menu will become a scrolling list box.


Background Fade In/Out dialog box

[Insert > Script > Script Wizard... > Special Effects - Background fade in/out]

Activate effect

Decide when the fade in/out effect should occur.

  • Upon entering the document
    The background fade in/out effect takes place upon entering the document.
  • Upon leaving the document
    The background fade in/out effect takes place upon leaving the document.

Enable fade effect

Check to enable the background fade in/out effect. Properties will be enabled, if you select this check box.

Properties

  • Starting color
    Select the starting color from the drop-down menu. This determines the document's background color at the beginning of the fade effect.
  • Ending color
    Select the ending color from the drop-down menu. This determines the document's background color at the end of the fade effect.
  • Number of steps
    Specify the number of intermediate steps between the start color and the end color. The more steps, the smoother and slower the fade will be.


Floating layer dialog box

[Insert > Script > Script Wizard... > Special Effects - Floating layer]

Target layer

Select a layer that you will use as the floating layer. First, insert layers in the document, and select one from the drop-down menu.

  • No floating effect
    Disables the floating layer effect and removes the script from the HTML source.
  • Float at the current position.
    The layer will remain still ('float') at the current position.

Float layer location

Specify the position where the layer will be placed.

  • Top left
    The layer will remain in the top-left part of the window.
  • Top center
    The layer will remain at the top-center of the window.
  • Top right
    The layer will remain in the top-right part of the window.
  • Bottom left
    The layer will remain in the bottom-left part of the window.
  • Bottom center
    The layer will remain at the bottom-center of the window.
  • Bottom right
    The layer will remain in the bottom-right part of the window.


Expanding Navigation Menu dialog box

[Insert > Script > Script Wizard... > Menu and Navigation - Expanding navigation menu]

Menu item list

Displays menu items in a hierarchical list. You can create a menu with hierarchical levels. Select an item and click Add... to add a new item in a sublevel of the selected item. Sublevel items are shown indented under their parent menu items.

Buttons

  • Add...
    Adds a new item in the sublevel of the selected item. Specify the Item name, Target URL, Target frame in the Menu Item Settings dialog box, and click OK.
  • Modify...
    Click to modify the selected item in the list. Modify the Item name, Target URL, Target frame in the Menu Item Settings dialog box, and click OK.
  • Remove
    Removes the selected item.
  • Up
    Moves the selected item one level higher.
  • Down
    Moves the selected item one level lower.

Movement of an item is restricted to the same menu level. Sublevel items move along with the parent menu.

Menu item info

  • URL
    Shows the Target URL of the selected menu item, which was specified in the Menu Item Settings dialog box.
  • Target frame
    Shows the Target frame of the selected menu item, which was specified in the Menu Item Settings dialog box.


Actions and Events

What is an action?

An action is JavaScript script that is executed by the Web browser when an event occurs to trigger it. Many types of scripts are provided in Namo WebEditor as actions, and all actions are designed to work in popular browsers such as Internet Explorer and Netscape Navigator. Some of the most commonly-used actions include those that: replace an image with another image (a "rollover" action), open a dialog box to show a message to the site visitor, and show or hide a layer in the document.

What is an event?

An event is an occasion that triggers an action. Clicking on a layer, moving the mouse-pointer over an image, pressing keys, and loading documents are all types of events. Events are used by scripts in Web pages to "know" when to execute actions. The Web browser constantly checks for events and notes when and where an event took place. If the event occurs, as specified in a script in the page's source, the browser executes the action specified in the script.

Double-click this image to see a message box.

Click this image to replace it with other image.

When you use the Script Wizard, the event by which an action occurs is predefined, leaving you to decide only the parameters. On the other hand, by using an action you can decide on the event that will trigger the action, as well as the parameters.


Event List

What is an event?

An event, in the context of Web documents, is something that a site visitor viewing a Web page does in order to trigger an action, such as the opening of a new browser window. Clicking on an object in the page (such as a layer) is an event; so is merely moving the mouse pointer over an object. Events are used by scripts in Web pages to "know" when to execute actions. The Web browser constantly checks for events and notes when and where an event takes place. If the event occurs, as specified in a script in the page's source, the browser executes the specified action.

Not every event is applicable to every type of object. For instance, onKeyPress is not applicable to layers, since layers do not accept text input--only certain kinds of form fields do. If an event is not applicable to an object, Namo WebEditor does not allow you to associate an event with it.

Following is the list of events supported by Namo Web Editor.

Event | Description
onAbort | Occurs when the visitor cancels loading a page that is in the process of loading, such as by using the browser's Stop button or clicking a hyperlink to move to a different page.
onError | Occurs when the browser encounters an error while loading the page or an image
onResize | Occurs when the browser size is adjusted.
OnScroll | Occurs when the browser screen is scrolled.
onLoad | Occurs when the browser finishes loading the relevant object, such as an image.
onUnload | Occurs when the browser leaves the current page.
onBlur | Occurs when a form field loses "focus". (See onFocus.)
onChange | Occurs when the visitor edits the contents of a form field and then leaves the field.
onFocus | Occurs when a form field becomes the target of the visitor's key stroke, due to being selected by the visitor's clicking in the field or moving to it using the tab key.
onKeyDown | Occurs while the visitor is holding a key down while within a form field.
onKeyPress | Occurs while the visitor is holding a key down while within a form field.
onKeyUp | Occurs when the visitor releases a key while within a form field.
onSelect | Occurs when the visitor selects all or some of the contents of a form field.
onClick | Occurs when the visitor clicks the object referred to by the script using the mouse.
onDblClick | Occurs when the visitor double-clicks the relevant object using the mouse.
onMouseOut | Occurs when the mouse pointer exits the bounds of the relevant object.
onMouseOver | Occurs when the mouse pointer enters the bounds of the relevant object.
onMouseDown | Occurs when the visitor clicks on the relevant object, in the "up to down" part of the click.

top


Action List

An action is a JavaScript script that is executed by the Web browser when an event occurs to trigger it. Many types of actions are possible. Some of the most commonly-used actions include those that: replace an image with another image (a rollover action), open a dialog box to show a message to the site visitor, and show or hide a layer in the document.

Namo WebEditor supports a variety of actions that you can attach to various page elements through the Action window. To view the help for any action, click the name of the action in the table below.

Action | Description
Apply Alpha Effect | Sets the opacity of a specific object.
Apply Blur Effect | Applies a blurry shadow effect to an object.
Apply Chroma Effect | Makes a specific color transparent.
Apply DropShadow Effect | Applies a shadow effect that makes objects appear floating.
Apply Fliph Effect | Creates a horizontal mirror image of the target layer.
Apply Flipv Effect | Creates a vertical mirror image of the target layer.
Apply Glow Effect | Applies a glow filter to the target layer.
Apply Gray Effect | Applies a gray filter to the target layer.
Apply Invert Effect | Inverts every color property inside a layer.
Apply Mask Effect | Makes the transparent part of a layer have specific color, and makes the other part transparent.
Apply Motionblur Effect | Sets the blurriness of an object.
Apply Shadow Effect | Applies shadowing to the objects in the target layer.
Apply Wave Effect | Distorts an object into a wavy shape.
Apply X-ray Effect | Makes the objects show only their outlines.
Blink Effect | Makes the window blink.
Break Frame | Prevents the document from being included in a frame.
Call JavaScript Function | Calls a JavaScript function stored in the current document.
Change URL of Window | Changes the URL of the current window.
Check Browser | Loads a different page depending on the browser type.
Check Plugin Installation | Loads a different page depending on the browser type.
Clip Layer | Clips off a portion of the layer.
Close Window | Opens a pop-up window that asks whether to close the current window.
Erasing Status bar | Repeatedly writes and erases the text in the status bar.
Flashing Status bar | Makes the text in the status bar flash.
Glide Layer | Glides a layer to the position specified.
Go to Timeline Frame | Moves to a specific frame of the timeline.
Hide Layer | Makes the layer invisible.
Hide Object | Makes a specific object invisible.
Insert Text to Layer | Inserts a text to the layer.
Insert Text in Status bar | Displays a message in the status bar of the browser.
Make Layer Tooltip | Makes a tooltip for the target layer.
Merge Frames | Opens a URL without frames in the current window.
Move Focus to | Moves the focus to a specific form field.
Move Layer by | Moves the layer by the amount of offset specified.
Move Layer to | Moves the layer to the position specified.
Null Validation of Form Field | Checks whether the text field is blank or not .
Number Validation | Checks whether the value in the text field is a number.
Open Full Window | Opens a full window.
Open Message Window | Shows a window that contains a message.
Open URL | Opens a new browser window with the specified settings.
Open URL After Delay | Moves to a new URL after a specific delay time.
Open Sponsor Window | Opens an additional window with a specific URL when a hyperlink is clicked.
Pause Windows Media Player | Pauses the playback of the Windows Media Player embedded within the document.
Play Timeline | Starts or restarts a timeline animation.
Play Windows Media Player | Plays the Windows Media Player embedded within the document.
Popup Message | Displays a dialog box containing a message.
Preload Image | Preloads an image when the document is loaded in a browser.
Prevent Right Click | Prevents mouse right-click event.
Print Document | Lets you print the current document.
Redirect by Operating System | Redirects the user to a new URL according to the user's operating system.
Redirect By Screen Resolution | Redirects the user to a new URL according to the user's screen resolution.
Redirect with Alert Message | Redirects the visitor to a new URL with an alert message.
Reload at Intervals | Reloads the window at specific intervals.
Reload Window | Reloads the window.
Remove Filter Effect | Removes the filter effect.
Replace Image | Replaces an image in the document with another image.
Reset Form Field | Clears a specific text form field.
Resize Image | Resizes an Image.
Resize Layer | Resizes a layer.
Resize Window by | Resizes the window by the amount of value specified.
Resize Window to | Resizes the window to the size specified.
Restore Image | Restores an image after it has been replaced with another image.
Restrict Text Length | Checks the maximum length of the text field.
Rotate Window | Rotates the window.
Scroll Page | Scrolls the web page by the amount specified.
Select Text | Selects texts in a specific text form field.
Set Background Image of Layer | Sets the background image of a layer.
Set Background Color of Layer | Sets the background color of the layer.
Set Background Image | Sets the background image of the document.
Set Background Color | Sets the background color of the document.
Set Z-Index | Sets the Z-index of a layer.
Shake Windows | Shakes the window as many times as specified.
Shooting Status bar | Displays text in the status bar by shooting characters one after another.
Show Layer | Makes the layer visible.
Show Object | Makes a specific object visible.
Spreading Window | Opens a window by gradually enlarging it.
Stop Timeline | Stops playback of a timeline animation.
Stop Windows Media Player | Stops the playback of the Windows Media Player embedded within the document.
Update Three Frames | Updates three frames at a time.
Update Two Frames | Updates two frames at a time.
Validate Email | Checks whether the entered email address is valid.
Validate Form | Check whether there is a blank text form field in the specified form.
Wipe Layer | Shows a layer with wiping effect.
Write Last Update Information to Layer | Displays last update information in a layer.

top


Parameter List

You can specify the parameter for the action you have selected. The following is the list of parameters assigned for each action provided by Namo WebEditor.

Action | Parameters | Description
Apply Alpha Effect | Target layer | Enter the name of the target layer.
 | Style | Choose the style of the filter effect.
 | Opacity | Enter the opacity of the initial point. Enter 100 for maximum opacity.
 | Finish Opacity | Enter the opacity of the finish point.
 | Start X | Enter the X coordinate (horizontal) of the position where the opacity gradient starts.
 | Start Y | Enter the Y coordinate (vertical) of the position where the opacity gradient starts.
 | Finish X | Enter the X coordinate (horizontal) of the position where the opacity gradient ends.
 | Finish Y | Enter the Y coordinate (vertical) of the position where the opacity gradient ends.
Apply Blur Effect | Target Layer | Enter the name of the target layer.
 | Pixel Radius | Set the radius of the area that is affected by the filter. The default value is '2'.
 | Make Shadow | Decide the value that indicates whether content is displayed as a shadow. By defaut, it is set to 'false'.
 | Shadow Opacity (%) | Set the opacity level of a shadow created by the filter. The default value is '50'.
Apply Chroma Effect | Target Layer | Enter the name of the target layer.
 | Color | Set the color for the chroma effect.
Apply DropShadow Effect | Target Layer | Enter the name of the target layer.
 | Color | Enter the color of the drop shadow.
 | Off X | Enter the width of the shadow.
 | Off Y | Enter the height of the shadow.
Apply Flipv Effect | Target Layer | Enter the name of the target layer.
Apply Fliph Effect | Target Layer | Enter the name of the target layer.
Apply Glow Effect | Target Layer | Enter the name of the target layer.
 | Color | Set the color of the glow effect.
 | Strength | Enter the strength of the glow effect, values ranging from 1 to 255.
Apply Gray Effect | Target Layer | Enter the name of the target layer.
Apply Invert Effect | Target Layer | Enter the name of the target layer.
Apply Mask Effect | Target Layer | Enter the name of the target layer.
 | Color | Enter the color of the mask effect.
ApplyMotionblur Effect | Target Layer | Enter the name of the target layer.
 | Strength | Enter the strength of the motionblur effect, values ranging from 1 to 255.
 | Direction | Enter the direction which the effect is applied from.
Apply Shadow Effect | Target Layer | Enter the name of the target layer.
 | Color | Enter the color of the shadow.
 | Direction | Enter the direction that the shadow effect is applied from.
Apply Wave Effect | Target Layer | Enter the name of the target layer.
 | Add | Set the value that indicates whether the filter image overlays the original image.
 | Frequency | Enter the number of waves created by the filter.
 | Light Strength | Enter the difference in light intensity between the peaks and troughs of the waves.
 | Phase | Enter the phase offset at which the sine wave starts.
 | Strength | Enter the distance that a filter effect extends, in pixels.
Apply X-ray Effect | Target Layer | Enter the name of the target layer.
Blink Effect | Frequency | Enter the frequency of the blink effect in seconds.
Break Frame |  |
Call JavaScript Function | Function | Enter the JavaScript function and its attributes.
Change URL of Window | URL | Enter the new URL.
Check Browser | Netscape URL | Enter the URL to move to when the visitor's browser is Netscape.
 | Internet Explorer URL | Enter the URL to move to when the visitor's browser is Internet Explorer.
 | Target Frame | Enter the target frame to load the URLs.
Check Plugin Installation | Plugin name | Enter the plugin name to check.
 | Plugin exists URL | Enter the URL to move to when the plugin exists.
 | No plugin URL - Netscape | Enter the URL where you can download the plugin for Netscape.
 | Target Frame | Enter the target frame to open the URLs.
Clip Layer | Target Layer | Enter the name of the target layer.
 | Top | Enter the position of the top line in pixels.
 | Left | Enter the position of the left line in pixels.
 | Right | Enter the position of the right line in pixels.
 | Bottom | Enter the position of the bottom line in pixels.
Close Window |  |
Erasing Status bar | Message Text | Enter the message to be shown in the status bar.
 | Intervals (millisecond) | Specify the intervals of the text animation, in milliseconds.
Flashing Status bar | Message Text | Enter the message to be shown in the status bar.
 | Intervals (millisecond) | Specify the intervals of text animation, in milliseconds.
Glide Layer | Target Layer | Enter the name of the target layer.
 | Start X | Enter the X coordinate (horizontal) of the initial position of the layer's top left corner.
 | Start Y | Enter the Y coordinate (vertical) of the initial position of the layer's top left corner.
 | End X | Enter the X coordinate (horizontal) of the final position of the layer's top left corner.
 | End Y | Enter the Y coordinate (vertical) of the final position of the layer's top left corner.
 | Speed | Enter the speed of the effect. The higher the speed, the slower the movement will be.
 | Step | Enter the step of the movement. The larger the steps, the faster the movement will be.
Go to Timeline Frame | Timeline name | Enter the name of the timeline.
 | Frame number | Enter the frame number to start the timeline from.
 | Limit of repetitions | Enter the maximum number of times that the action can run by the same event.
Hide Layer | Target Layer | Enter the name of the target layer.
Hide Object | Object ID | Enter the name attribute of the object you want to hide.
Insert Text in Status bar | Message Text | Enter the message to be shown in the status bar.
Insert Text to Layer | Target Layer | Enter the name of the target layer.
 | Message | Enter the message to insert.
 | Font Color | Set the font color.
 | Font Size | Enter the font type.
 | Font | Select the font size.
 | Font Style | Select the font style.
 | Font Weight | Select the font weight.
Make Layer Tooltip | Target Layer | Enter the name of the target layer.
 | Message | Enter the message for the tooltip.
 | Client X | Enter the X-coordinate, relative to the document, of which the tooltip will appear.
 | Client Y | Enter the Y-coordinate, relative to the document, of which the tooltip will appear.
 | Font Color | Select the font color.
 | Font | Select the font type.
 | Font Size | Enter the font size.
 | Font Style | Select the font style.
 | Font Weight | Select the font weight.
 | Background Color | Set the background color.
Merge Frames | URL | Enter the URL to open in the window.
Move Focus to | Form Name | Enter the form name.
 | Form Field | Enter the form field name.
Move Layer by | Target Layer | Enter the name of the target layer.
 | Offset X | Enter the offset to the horizontal direction in pixels.
 | Offset Y | Enter the offset to the vertical direction in pixels.
Move Layer to | Target Layer | Enter the name of the target layer.
 | X coordinate | Enter the X coordinate (horizontal) of the target position to which the layer will be moved in pixels.
 | Y coordinate | Enter the Y coordinate (vertical) of the target position to which the layer will be moved in pixels.
Null Validation of Form Field | Form Name | Enter the form name.
 | Form Field | Enter the form field name.
 | Message | Enter the message to show when the form field is left blank.
Number Validation | Form Name | Enter the form name.
 | Form Field | Enter the form field name.
 | Message | Enter the message to show when the text does not have number format.
Open Full Window | URL | Enter the URL to show in the full window.
Open Message Window | Title | Enter the title for the message window.
 | Width | Enter the width of the message window.
 | Height | Enter the height of the message window.
 | Message | Enter the message to show in the message window.
 | Background Color | Enter the color for the background color.
 | Background Image | Enter the path of the image file to be used as a background image.
 | Text Color | Set the font color.
 | Font | Select the font type.
 | Font Size | Enter the font size.
Open Sponsor Window | Target URL | Enter the target URL.
 | Sponsor URL | Enter the sponsor URL. (Sponsor URL: an URL that must be visited prior to the target URL)
Open URL | Window name | Enter a name for the new window which will appear in the title bar.
 | URL | Enter the URL of the new window.
 | X coordinate | Enter the horizontal position of the left corner of the new window, in pixels.
 | Y coordinate | Enter the vertical position of the top-left corner of the new window, in pixels.
 | Width | Enter the width of the new window in pixels.
 | Height | Enter the height of the new window in pixels.
 | Show toolbar | Decide whether to show toolbars in the new window.
 | Show menu bar | Decide whether to show menu bars in the new window.
 | Show status bar | Decide whether to show the status bar in the new window.
 | Show scroll bars | Decide whether to show scroll bars in the new window.
 | Resizable | Decide whether to make the new window resizable.
Open URL After Delay | URL | Enter the URL to move to.
 | Delay Time (Second) | Enter the delay time in seconds.
Pause Windows Media Player | ID | Enter the ID of the Windows Media Player ActiveX Control.
Play Timeline | Timeline name | Enter the name of the timeline.
Play Windows Media Player | ID | Enter the ID of the Windows Media Player ActiveX Control.
Popup Message | Message text | Enter the message to be shown in the popup message.
Preload Image | Image path | Enter the path of the image to be preloaded.
Prevent Right Click | Message | Enter the message to show when the right mouse button click occurs.
Print Document |  |
Redirect by Operating System | MacURL | Enter the URL to move to when the visitor's operating system is Macintosh.
 | LinuxURL | Enter the URL to move to when the visitor's operating system is Linux.
 | WindURL | Enter the URL to move to when the visitor's operating system is Windows.
Redirect By Screen Resolution | 640x480 | Enter the URL to move to when the visitor's screen resolution is 640x480 resolution.
 | 800x600 | Enter the URL to move to when the visitor's screen resolution is 800x600 resolution.
 | 1024x768 | Enter the URL to move to when the visitor's screen resolution is 1024x768 resolution.
 | Other | Enter the URL to move to when the visitor's screen resolution is not one of the three above.
Redirect with Alert Message | Message | Enter the message to appear.
 | URL | Enter the URL to move to.
Reload at Intervals | Intervals (Second) | Enter the interval of the reload in seconds.
Reload Window |  |
Remove Filter Effect | Target Layer | Enter the name of the target layer.
Replace Image | Original image name | Enter the name attribute of the original image.
 | Replacement image path | Enter the path of the image that is to replace the former.
 | Preload replacement image | Decide whether to preload the replacement image.
Reset Form Field | Form Name | Enter the form name.
 | Form Field | Enter the form field name.
Resize Image | Image Name | Enter the name attribute of the image.
 | Width | Enter the width to which the image will be resized.
 | Height | Enter the height to which the image will be resized.
Resize Layer | Target Layer | Enter the name of the target layer.
 | Width | Enter the width of the layer in pixels.
 | Height | Enter the height of the layer in pixels.
Resize Window by | Offset X | Enter the X-coordinate to which the window will be resized in pixels.
 | Offset Y | Enter the Y-coordinate to which the window will be resized in pixels.
Resize Window to | Width | Enter the width of the window in pixels.
 | Height | Enter the height of the window in pixels.
Restore Image | Image name | Enter the name attribute of the image.
Restrict Text Length | Form Name | Enter the form name.
 | Form Field | Enter the form field name.
 | Message | Enter the message to show when the text exceeds the maximum length.
 | Max Length | Enter the maximum length of the text.
Rotate Window | Radius | Enter the radius (diameter value of rotating window) of the rotation in pixels.
 | Number of rotation | Enter the number of rotations.
 | Offset X | Enter the X coordinate (horizontal) of the final position.
 | Offset Y | Enter the Y coordinate (vertical) of the final position.
Scroll Page | Length | Enter the length of the scrolling in pixels.
 | Direction | Choose the direction of the scrolling.
Select Text | Form Name | Enter the name of the form.
 | Form Field | Enter the name of the form field.
Set Background Color | Color | Set the background color of the Web document.
Set Background Color of Layer | Target Layer | Enter the name of the target layer.
 | Color | Set the color to be used as a background color of the layer.
Set Background Image | Image | Enter the path of the image file which will be used as a background image.
Set Background Image of Layer | Target Layer | Enter the name of the target layer.
 | Image | Enter the path of the image file.
Set Z-Index | Target Layer | Enter the name of the target layer.
 | Z-Index | Enter the value of the Z-index.
Shake Windows | Number of Shaking Times | Enter the number of times that the window will shake.
Shooting Status bar | Message | Enter the message to be shown on in the status bar.
 | Intervals (millisecond) | Enter the intervals of text animation.
Show Layer | Target Layer | Enter the name of the target layer.
Show Object | Object ID | Enter the name attribute of the object you want to show.
Spreading Window | Initial Width | Enter the initial width of the window in pixels.
 | Initial Height | Enter the initial height of the window in pixels.
 | Target Width | Enter the final width of the window in pixels.
 | Target Height | Enter the final height of the window in pixels.
 | Width Speed | Enter the speed of the movement to the horizontal direction in pixels.
 | Height Speed | Enter the speed of the movement to the vertical direction in pixels.
Stop Timeline | Timeline name | Enter the name of the timeline.
Stop Windows Media Player | ID | Enter the ID of the Windows Media Player ActiveX Control.
Update Three Frames | Frame 1 | Enter the frame to open URL 1.
 | URL 1 | Enter the URL to open in target frame 1.
 | Frame 2 | Enter the frame to open URL 2.
 | URL 2 | Enter the URL to open in target frame 2.
 | Frame 3 | Enter the frame to open URL 3.
 | URL 3 | Enter the URL to open in target frame 3.
Update Two Frames | Frame 1 | Enter the frame to open URL 1.
 | URL 1 | Enter the URL to open in target frame 1.
 | Frame 2 | Enter the frame to open URL 2.
 | URL 2 | Enter the URL to open in target frame 2.
Validate Email | Form Name | Enter the form name.
 | Form Field | Enter the form field name.
 | Message | Enter the message to show when the email address is of an invalid form.
Validate Form | Form Name | Enter the form name.
 | Message | Enter the message to show when the form has a blank text form field.
Wipe Layer | Target Layer | Enter the name of the target layer in pixels.
 | Starting Top | Enter the initial position of the top line in pixels.
 | Starting Right | Enter the initial position of the right line in pixels.
 | Starting Bottom | Enter the initial position of the bottom line in pixels.
 | Starting Left | Enter the initial position of the left line pixels.
 | Ending Top | Enter the final position of the top line in pixels.
 | Ending Right | Enter the final position of the right line in pixels.
 | Ending Bottom | Enter the final position of the bottom line in pixels.
 | Ending Left | Enter the final position of the left line in pixels.
 | Color | Set the color of the layer.
 | Step | Enter the step of the movement. The larger the steps, the faster the movement will be.
Write Last Update Information to Layer | Target Layer | Enter the name of the target layer to show the update information.
 | Font Color | Set the font color.
 | Font Size | Enter the font size.
 | Font | Select the font type.
 | Font Style | Select the font style.
 | Font Weight | Select the font weight.

top


Attaching actions to objects

By attaching an action to an object in the document (such as an image), you can have the action triggered by some event involving the object.

For an introduction to actions and events, see the Action and Event Overview.

A list of object types to which you can attach actions is at the bottom of this page.

There are two ways to attach an action to most types of objects. These methods are described below.

Attaching an action to objects using the Action window

  1. Click to select the desired object in the Edit window.
  2. In the Action window, click Add... to open the Action Properties dialog box.
  3. Select an event and an action using the drop-down menus in the Action Properties dialog box. Please refer to Event List and Action List.
  4. Edit the parameters of the action in the Parameters list box.
  5. Click OK. You can preview the action by switching to the Preview window.

Attaching an action using the Script Manager

The Script Manager lets you manage all the actions in a document from one window.
  1. Select the [Window > Script Manager] menu command to open the Script Manager dialog box.
  2. In the hierarchical list of eligible objects on the left side of the dialog box, select the object that you want to attach an action to.
  3. Click Add... to open the Action Properties dialog box.
  4. Select an event and an action using the drop-down menus in the Action Properties dialog box.
  5. Edit the parameters of the action in the Parameters list box.
  6. Click OK twice to close the dialog boxes. You can preview the action by switching to the Preview window.

These methods cannot be used to attach actions to a Time Line. For help on attaching actions to a Time Line, see Inserting Actions in a Time Line.

Types of objects that can have attached actions

Not all types of page elements can have actions attached to them. The objects to which you can attach an action include:
  • Images
  • Layers
  • Hyperlinks
  • Forms, form fields, and form controls
  • the document itself
Some of the JavaScript actions supported by Namo WebEditor are not supported by Netscape.


Inserting actions in a Time Line

An action can be attached to a frame in a Time Line animation. The action will be triggered when the animation reaches the frame to which it is attached.

To attach an action to a frame in a Time Line, follow the steps below.

  1. Select the [Window > Time Line] menu command or press the shortcut key <Alt + 4> to open the Time Line window.
  2. Click to select the frame to which you want to attach an action and click Add... in the Action window.
  3. Select an event and an action using the drop-down menus in the Action Properties dialog box. Please refer to Event List and Action List.
  4. Edit the parameters of the action in the Parameters list box.
  5. Click OK twice to close the dialog boxes. In the Time Line window, an A will appear in the A row above the frame to indicate that an action has been attached. You can now preview the action by switching to the Preview window.

Some of the JavaScript actions supported by Namo WebEditor are not supported by Netscape.


Apply Alpha Effect

JavaScript action

Description

This action allows you to set the opacity of a specific object. Select the starting point and ending point of the opacity gradient and specify the level of opacity in Opacity and Finish Opacity. (Internet Explorer 5.5 or higher.)

Parameters

Parameter | Description
Target Layer | The name of target layer
Style | Select the shape characteristics of the opacity gradient.
Opacity | Sets the opacity of the initial point. Enter 100 for maximum opacity.
Finish Opacity | Sets the opacity of the finish point.
Start X | Sets the horizontal position at which the opacity gradient starts.
Start Y | Sets the vertical position at which the opacity gradient starts.
Finish X | Sets the horizontal position at which the opacity gradient ends.
Finish Y | Sets the vertical position at which the opacity gradient ends.

See also


Apply Blur Effect

JavaScript action

Description

This action applies a blurry shadow effect to an object. (Internet Explorer 5.5 or higher compatible.)

Parameters

Parameter | Description
Target Layer | The name of target layer
Make Shadow | Decides the value that indicates whether content is displayed as a shadow.
Pixel Radius | Sets the radius of the area that is affected by the filter.
Shadow Opacity | Sets the opacity level of a shadow created by the filter. Select "true" in Make Shadow to enable Shadow Opacity.

See also


Apply Chroma Effect

JavaScript action

Description

This action allows you to make a specific color inside an object become transparent. (Internet Explorer 5.5 or higher)

Parameters

Parameter | Description
Target Layer | The name of target layer
Color | The color which will become transparent by the Chroma effect.

See also


Apply Dropshadow Effect

JavaScript action

Description

This action applies a shadow that makes objects in the layer look floated. (Internet Explorer 5.5 or higher)

Parameters

Parameter | Description
Target Layer | The name of target layer
Color | Color applied with the filter.
Offset X | Offset of the filter effect to the horizontal direction.
Offset Y | Offset of the filter effect to the vertical direction.

See also


Apply Flipv Effect

JavaScript action

Description

This action flips the target layer upside-down making a vertical mirror image. (Internet Explorer 5.5 or higher.)

Parameters

Parameter | Description
Target Layer | The name of target layer.

See also


Apply Fliph Effect

JavaScript action

Description

This action creates a horizontal mirror image of the target layer. (Internet Explorer 5.5 or higher)

Parameters

Parameter | Description
Target Layer | The name of target layer.

See also


Apply Glow Effect

JavaScript action

Description

This action applies glow filter to the target layer. (Internet Explorer 5.5 or higher)

Parameters

Parameter | Description
Target Layer | The name of target layer.
Color | Sets the value of the color of the glow effect.
Strength | Sets the strength of the glow effect, values ranging from 1 to 255.

See also


Apply Gray Effect

JavaScript action

Description

This action changes the layer to the monochromatic colors.(Internet Explorer 5.5 or higher compatible.)

Parameters

Parameter | Description
Target Layer | The name of target layer.

See also


Apply Invert Effect

JavaScript action

Description

This action reverses all hue, saturation and brightness values of the layer. (Internet Explorer 5.5 or higher)

Parameters

Parameter | Description
Target Layer | The name of target layer.

See also


Apply Mask Effect

JavaScript action

Description

This action makes transparent part of the layer to have a specific color, and makes other part transparent. (Internet Explorer 5.5 or higher)

Parameters

Parameter | Description
Target Layer | The name of target layer.
Color | Color applied with the filter.

See also


Apply MotionBlur Effect

JavaScript action

Description

This action gives blurriness to objects in a specific layer. You can control the direction and strength of the filter. (Internet Explorer 5.5 or higher)

Parameters

Parameter | Description
Target Layer | The name of target layer.
Direction | Sets the direction that the filter's effect is applied to. Enter the degree of angle that the filter effect is applied from.
Strength | Sets the strength of the Motionblur effect, values ranging from 1 to 255.

See also


Apply Shadow Effect

JavaScript action

Description

This action creates a shadow to the objects in the layer to a specific direction. (Internet Explorer 5.5 or higher)

Parameters

Parameter | Description
Target Layer | The name of target layer.
Color | Color of the shadow effect.
Direction | The direction that the shadow effect is applied from.

See also


Apply Wave Effect

JavaScript action

Description

This action allows you to perform a sine wave distortion of the content of the object along the vertical axis. (Internet Explorer 5.5 or higher compatible.)

Parameters

Parameter | Description
Target Layer | The name of target layer.
Add | Set the value that indicates whether the filter image overlays the original image.
Frequency | Number of waves created by the filter.
Light Strength | Difference in light intensity between the peaks and troughs of the waves.
Phase | Phase offset at which the sine wave starts.
Strength | Distance, in pixels, that a filter effect extends.

See also


Apply Xray Effect

JavaScript action

Description

This action removes colors and details from the objects, only leaving their outlines. (Internet Explorer 5.5 or higher)

Parameters

Parameter | Description
Target Layer | The name of target layer.

See also


Blink Effect

JavaScript action

Description

This action makes text blink at a specific speed. This action is usually associated with OnLoad event.

Parameters

Parameter | Description
Frequency | Specify the frequency in seconds.

In order to display this effect successfully in Internet Explorer, you should specify the text to which the blink effect is applied. After adding the action in the Action window, switch to the HTML tab and enclose the relevant text with the <blink> and </blink> tags.

See also


Break Frame

JavaScript action

Description

This action prevents the document from opening in a frame. If the document is targeted into a frame by a hyperlink, it will remove the frames and open in the whole window. This action is associated with Onload event . It is useful when you do not want your documents be confined in a frame by hyperlinks.

See also


Call JavaScript Function

JavaScript action

Description

This action calls a JavaScript function by its name. The function must reside in the current document.

Parameters

Parameter | Description
Function | Enter the name of the JavaScript function, followed by its parameters. The format is function_name (parameter1, parameter2, ...)

See also


Change URL of Window

JavaScript action

Description

Changes the URL of the current window. This action does not open any new windows.

Parameters

Parameter | Description
URL | The new URL of the window.

Specify the protocol of the URL when you insert one as a parameter. For example, insert "http://www.namo.com" or "ftp://ftp.namo.com", instead of just "www.namo.com" or "ftp.namo.com".

See also


Check Browser

JavaScript action

Description

This action checks which browser (Netscape or Internet Explorer) the site visitor is using, then loads different documents depending on the browser types. This action is typically associated with the OnLoad event. This is useful because Netscape and Internet Explorer vary in their support of various HTML and CSS tags, JavaScript functions, plug-ins, etc., and it is sometimes necessary to create a separate set of documents for each browser.

Parameters

Parameter | Description
Netscape URL | The URL to load for Netscape browsers.
Internet Explorer URL | The URL to load if for Internet Explorer browsers.
Target frame | The frame in which to load either of the specified URLs.

Specify the protocol of the URL when you insert one as a parameter. For example, insert "http://www.namo.com" or "ftp://ftp.namo.com", instead of just "www.namo.com" or "ftp.namo.com".

See also


Check Plugin Installation

JavaScript action

Description

This action checks whether a specific plugin has been installed on the visitor's system, then loads one of three different documents, depending on the result. If you have a document that uses a certain plugin, you should attach this action to the document so that site visitors that don't have the plugin will see an alternative document -- one that either does not use the plugin -- or informs the visitor where the plugin can be downloaded from. (Netscape only)

Parameters

Parameter | Description
Plugin name | The name of the plugin to be checked.
Plugin exists URL | The URL to load if the plugin is found.
No plugin URL | The URL to load if the plugin is not found.
Target frame | The frame in which to load any of the specified URLs.

Specify the protocol of the URL when you insert one as a parameter. For example, insert "http://www.namo.com" or "ftp://ftp.namo.com", instead of just "www.namo.com" or "ftp.namo.com".

See also


Clip Layer

JavaScript action

Description

This action allows you to clip off or trim off a layer, leaving only a certain part of the layer visible. This action is usually associated with the Onload, OnClick and OnMouseOver events attached to image in a layer . Specify four lines to make a rectangle that you want to remain visible.

Parameters

Parameter | Description
Target Layer | The name of the target layer.
Top | Position of the top line of the visible rectangle, in pixels.
Left | Position of the left line of the visible rectangle, in pixels.
Right | Position of the right line of the visible rectangle, in pixels.
Bottom | Position of the bottom line of the visible rectangle, in pixels.

See also


Close Window

JavaScript action

Description

This action opens a pop-up window that asks if you wish to close the current window. It will close the window when confirmed. This action is usually associated with OnClick and OnBlur events.

See also


Erasing Status bar

JavaScript action

Description

This action erases the text in the status bar by one character after another in specific intervals.

Parameters

Parameter | Description
Message | Message to be shown in the status bar.
Intervals (millisecond) | The intervals of text animation, in milliseconds.

See also


Flashing Status bar

JavaScript action

Description

This action makes the text in the status bar flash in specific intervals.

Parameters

Parameter | Description
Message | Message to be shown in the status bar.
Intervals (millisecond) | The intervals of text animation, in milliseconds.

See also


Glide Layer

JavaScript action

Description

This action allows you to move a layer to a specific position at a specific speed. This action is usually associated with the Onload ,OnClick and OnMouseOver events which are attached to image and hyperlinks. You can specify the name of target layer, the values of starting and ending positioning, and speed.

Parameters

Parameter | Description
Target Layer | The name of the target layer.
Start X | Initial point of the layer in X coordinate.
Start Y | Initial point of the layer in Y coordinate.
End X | Target point of the layer in X coordinate.
End Y | Target point of the layer in Y coordinate.
Speed | Number of times of movement in a second.
Step | The step of a single movement, in pixels.

See also


Go to Time Line Frame

JavaScript action

Description

This action advances or "rewinds" a Time Line animation to the specified frame. You can make an animation start at a specified frame using this action.

Parameters

Parameter | Description
Time Line name | The name of the Time Line. Choose a Time Line from the drop-down menu.
Frame number | The frame to go to. If you enter a number higher than the last frame in the Time Line, an error will occur.
Limit of repetitions | The maximum number of times that the action will be triggered by the associated event. If the event occurs more than this number of times, it will on longer trigger the action.

See also


Hide Layer

JavaScript action

Description

This action, associated with the Show Layer action, toggles the visibility of a layer, making it visible or invisible. This action has many uses, such as temporarily showing a description of an image when the site visitor moves the mouse pointer over the image, or creating a drop-down menu that appears when the site visitor moves the mouse pointer over the menu title and disappears when the mouse pointer exits the menu.

Parameters

Parameter | Description
Target layer | Select a layer from the drop-down menu.

See also


Hide Object

JavaScript action

Description

This action makes the specified object invisible in the document. You can change the visibility of objects by using this action along with the Show Object action.

Parameters

Parameter | Description
Object ID | The name of object.

See also


Insert Text in Status bar

JavaScript action

Description

Insert Text in Status Bar replaces the existing contents of the browser's status bar with the specified text. The text remains in the status bar until it is replaced by another instance of the Insert Text in Status Bar action or by a browser status message. This action is often used to communicate some message to the site visitor. For instance, if triggered by an OnMouseOver event, the action can be used to show a description of an image in the status bar.

Parameters

Parameter | Description
Message text | The text to display in the status bar.

See also


Insert Text to Layer

JavaScript action

Description

This action allows you to insert a text in a specific layer. Other objects in the layer will be removed as the text is inserted. This action is usually associated with OnClick and OnMouseOver events.

Parameters

Parameter | Description
Target Layer | The name of the target layer.
Message | The text you want to insert in the layer.
Font Color | Select the font color.
Font Style | Select the font style.
Font Size | Enter the font size.
Font | Select the font type.
Font Weight | Select the font weight.

See also


Make Layer Tooltip

JavaScript action

Description

This action shows a tooltip that describes the designated layer.

Parameters

Parameter | Description
Target Layer | The name of target layer.
Message | The message for the layer tooltip.
Client X | Enter the X-coordinate, relative to the document, of which the tooltip will appear, in pixels.
Client Y | Enter the Y-coordinate, relative to the document, of which the tooltip will appear, in pixels.
Font Color | Select the font color from the Color Picker dialog box.
Font | Select the font type.
Font Size | Enter the font size.
Font Style | Select the font style.
Font Weight | Select the font weight.
Background Color | Select the background color.

See also


Merge Frames

JavaScript action

Description

This action opens a new URL in the current window without frames. All frames will be removed.

Parameters

Parameter | Description
URL | The new URL to open.

Specify the protocol of the URL when you insert one as a parameter. For example, insert "http://www.namo.com" or "ftp://ftp.namo.com", instead of just "www.namo.com" or "ftp.namo.com".

See also


Move Focus to

JavaScript action

Description

This action moves the focus to the form field you specify.

Parameters

Parameter | Description
Form Name | Name of the form.
Form Field Name | The name of form field the focus should move to.

See also


Move Layer by

JavaScript action

Description

This action allows you to move a layer by the amount of offset you specify. This action is usually associated with the OnMouseOver and OnClick events attached to image and hyperlinks.

Parameters

Parameter | Description
Target Layer | The name of the target layer.
Offset X | Horizontal movement of the layer, in pixels.
Offset Y | Vertical movement of the layer, in pixels.

See also


Move Layer to

JavaScript action

Description

This action allows you to move a layer to the position you specify. This action is usually associated with the OnMouseOver and OnClick events attached to image and hyperlinks.

Parameters

Parameter | Description
Target Layer | The name of the target layer.
X Coordinate | Horizontal target position to which the layer will be moved, in pixels.
Y Coordinate | Vertical target position to which the layer will be moved, in pixels.

See also


Null Validation of Form Field

JavaScript action

Description

This action checks if the text field in the form is blank, and shows a message if it is. This action is associated to Onblur Event.

Parameters

Parameter | Description
Form Name | Name of the form.
Form Field Name | The name of form field.
Message | Alert message for validation.

See also


Number Validation

JavaScript action

Description

This action checks if the text field value in the form is number, and generate a message if it isn't. This action is associated to OnBlur event.

Parameters

Parameter | Description
Form Name | Name of the form.
Form Field Name | The name of form field in the form.
Message | The message to show when the text does not have number format.

See also


Open Full Window

JavaScript action

Description

This action opens a new window that covers the entire screen without menu band, toolbars, scrollbars, status bar, or anything else attached to it. This action can be attached to hyperlinks.

Parameters

Parameter | Description
URL | The URL you wish to open in the full window.
Specify the protocol of the URL when you insert one as a parameter. For example, insert "http://www.namo.com" or "ftp://ftp.namo.com", instead of just "www.namo.com" or "ftp.namo.com".

See also


Open Message Window

JavaScript action

Description

This action allows you to open a window that contains a message. This action is usually associated with OnClick and OnMouseOver event.

Parameters

Parameter | Description
Title | The title of the message window.
Width | The width of the message window.
Height | The height of the message window.
Message | The message to show in the message window.
Background Color | The background color of the message window.
Background Image | The background image of the message window.
Text Color | Select the font color.
Font | Select the font type.
Font Size | Enter the font size.

See also


Open Sponsor Window

JavaScript action

Description

When you click a hyperlink to visit a site, Open Sponsor Window opens an additional window with another URL you specified. This action is useful when you want users to visit your sponsor site. This action is attached to hyperlinks.

Parameters

Parameter | Description
Target URL | The URL of the target page.
Sponsor URL | The URL of the sponsor page.

Specify the protocol of the URL when you insert one as a parameter. For example, insert "http://www.namo.com" or "ftp://ftp.namo.com", instead of just "www.namo.com" or "ftp.namo.com".

See also


Open URL

JavaScript action

Description

This action opens a new browser window with various options, such as location, size, and whether to show various parts of the window. This action is usually attached to a button or a hyperlink and triggered by an OnClick event. The new window can be reused by other instances of the Open Browser Window action; however, on each reuse, only the URL parameter will be observed and all other parameters will be ignored.

Parameters

Parameter | Description
Window name | The name of the new window. The default name is win1.
URL | The URL of the document to open in the new window.
X coordinate | The horizontal position of the window, in pixels, relative to the left edge of the screen.
Y coordinate | The vertical position of the window, in pixels, relative to the top edge of the screen.
Width | The width of the window in pixels.
Height | The height of the window in pixels.
Show toolbar | Select yes or no from the drop-down menu.
Show menu bar | Select yes or no from the drop-down menu.
Show status bar | Select yes or no from the drop-down menu.
Show scroll bars | Select yes or no from the drop-down menu.
Resizable | Select yes or no from the drop-down menu.

Specify the protocol of the URL when you insert one as a parameter. For example, insert "http://www.namo.com" or "ftp://ftp.namo.com", instead of just "www.namo.com" or "ftp.namo.com".

See also


Open URL After Delay

JavaScript action

Description

This action leads the visitor to a new site after a specific delay time. You can specify the delay time as well as the URL. This action is usually associated with OnLoad event. It is useful when the URL of the Web site is changed, and you want to redirect those who have visited your previous URL to the new web site.

Parameters

Parameter | Description
URL | The target URL.
Delay Time (Second) | The delay time, in seconds. The default value is '3'.

Specify the protocol of the URL when you insert one as a parameter. For example, insert "http://www.namo.com" or "ftp://ftp.namo.com", instead of just "www.namo.com" or "ftp.namo.com".

See also


Pause Windows Media Player

JavaScript action

Description

This action allows you to pause the playback of Windows Media Player ActiveX control embedded in the document. This action is associated with OnClick and OnMouseOver events. (Internet Explorer compatible.)

Parameter | Description
ID | The ID of the Windows Media Player ActiveX Control.

See also


Play Time Line

JavaScript action

Description

This action starts playing a Time Line animation. If it is triggered after a Stop Time Line action, the animation will restart at the point it had stopped.

Parameters

Parameter | Description
Time Line name | The name of the Time Line. Select a Time Line from the drop-down menu.

See also


Play Windows Media Player

JavaScript action

Description

This action allows you to play the Windows Media Player ActiveX control embedded in the document. This action is associated with Onclick and OnMouseOver event. (Internet Explorer compatible.)

Parameters

Parameter | Description
ID | The ID of the Windows Media Player ActiveX Control.

See also


Popup Message

JavaScript action

Description

Thjs action opens a dialog box containing the specified message to appear on the site visitor's screen. This action could be used, for instance, to give a warning to the visitor that the current document requires a certain browser version to display correctly.

Parameters

Parameter | Description
Message text | The message to be shown in the popup message.

See also


Preload Image

JavaScript action

Description

This action is used to preload an image file when the document is loaded. This is only useful if the image is not subject to be loaded otherwise. Generally, this action is used, in conjunction with a Replace Image action, so that the image replacement takes place without any delay.

Parameters

Parameter | Description
Image path | The path or URL of the image to preload.

If you add a Replace Image action to a document and set the Preload replacement image parameter to Yes, a Preload Image action will automatically be inserted to the document using the OnLoad event.

See also


Prevent Right-click

JavaScript action

Description

This action prevents the right-click event from functioning. Instead, a message will appear when you click the right button of the mouse.

Parameters

Parameter | Description
Message | Enter the message to show when the right mouse button click occurs.

See also


Print Document

JavaScript action

Description

This action allows you to print the current document. This will open the Print dialog box of the Web browser. Click Print to start printing.

See also


Redirect by Operating System

JavaScript action

Description

This action detects the visitor's operating system and redirects the visitor to the page tuned for the specific operating system.

Parameters

Parameter | Description
MacURL | URL of the web page tuned for Mac OS.
LinuxURL | URL of the web page tuned for Linux.
WinURL | URL of the web page tuned for MS Windows.

Specify the protocol of the URL when you insert one as a parameter. For example, insert "http://www.namo.com" or "ftp://ftp.namo.com", instead of just "www.namo.com" or "ftp.namo.com".

See also


Redirect By Screen Resolution

JavaScript action

Description

This action allows you to detect the visitor's screen resolution and redirects the visitor to the page tuned for the specific screen resolution.

Parameters

Parameter | Description
640x480 | The URL to move to when the visitor's screen resolution is 640x480.
800x600 | The URL to move to when the visitor's screen resolution is 800x600.
1024x768 | The URL to move to when the visitor's screen resolution is 1024x768.
Others | The URL to move to when the visitor's screen resolution is not one of the three provided above.

Specify the protocol of the URL when you insert one as a parameter. For example, insert "http://www.namo.com" or "ftp://ftp.namo.com", instead of just "www.namo.com" or "ftp.namo.com".

See also


Redirect with Alert Message

JavaScript action

Description

This action leads the visitor to a new site after showing the visitor an alerting message in a pop-up window.

Parameters

Parameter | Description
Message | Alert message to show.
URL | The target URL to move to.

Specify the protocol of the URL when you insert one as a parameter. For example, insert "http://www.namo.com" or "ftp://ftp.namo.com", instead of just "www.namo.com" or "ftp.namo.com".

See also


Reload at Intervals

JavaScript action

Description

This action reloads the window at a specified intervals. This is useful when you want the page be refreshed periodically. This action is usually associated with Onload event.

Parameters

Parameter | Description
Interval (Second) | Specify reload interval, in seconds.

See also


Reload Window

JavaScript action

Description

This acrion reloads the current document. This action is useful when the document needs to be refreshed.

See also


Remove Filter Effect

JavaScript action

Description

This action removes all the filter effects applied to the specified object.

Parameters

Parameter | Description
Target Layer | The name of target layer.

See also


Replace Image

JavaScript action

Description

This action causes the specified image to be replaced by another specified image. The second image will be displayed in the same size as the first image. This action could be used, for instance, in conjunction with the Restore Image action to create a rollover effect (although this is more easily accomplished using the Script Wizard).

If you add a Replace Image action to a document and set the Preload replacement image parameter to yes, a Preload Image action will automatically be attached to the document using the OnLoad event.

Parameters

Parameter | Description
Original image name | The name of the original image. Select an image using the drop-down menu. (Image names are specified in the General tab of the Image Properties dialog box, using the Name attribute text box.)
Replacement image path | The path or URL to the replacement image. Click [image] to select an image from your hard drive.
Preload replacement image | Specifies whether to preload the replacement image so that it displays immediately when the action is triggered. Select Yes or No from the drop-down menu.

You can specify the image name attribute in the Name attribute text box at the General tab of the Image Properties dialog box.

See also


Reset Form Field

JavaScript action

Description

This action clears the text field you specify. This action is usually associated with the OnFocus event.

Parameters

Parameter | Description
Form Name | Name of the form.
Form Field Name | The name of the form field.

See also


Resize Image

JavaScript action

Description

This action allows you to resize an image to the size you specify.

Parameters

Parameter | Description
Image Name | The name attribute of the image
Height | The height to which the image will be resized, in pixels.
Width | The width to which the image will be resized, in pixels.

You can specify the image name attribute in the Name attribute text box at the General tab of the Image Properties dialog box.

See also


Resize Layer

JavaScript action

Description

Resize a specific layer to the size you specify. It is associated with the OnMouseOver and OnMouseOut event.

Parameters

Parameter | Description
Target Layer | The name of target layer.
Width | Width of the layer, in pixels.
Height | Height of the layer, in pixels.

See also


Resize Window by

JavaScript action

Description

This action changes the size of window by the amount of value you specify. This action is usually associated with OnClick and OnMouseOver event.

Parameters

Parameter | Description
Offset X | Enter the X-coordinate to which the window will be resized, in pixels.
Offset Y | Enter the Y-coordinate to which the window will be resized, in pixels.

See also


Resize Window to

JavaScript action

Description

This action resizes the window to the size you specify. This action is usually associated with OnClick and OnMouseOver event.

Parameters

Parameter | Description
Width | Width of the window, in pixels.
Height | Height of the window, in pixels.

See also


Restore Image

JavaScript action

Description

Restore Image is generally used to undo the effect of a Replace Image action. It restores the original image. This action could be used, for instance, in conjunction with the Replace Image action to create a rollover effect (although this is more easily accomplished using the Script Wizard).

Parameters

Parameter | Description
Image name | The name of the image to restore. Select an image from the drop-down menu. (Image names are specified in the General tab of the Image Properties dialog box, using the Name attribute text box.)

You can specify the image name attribute in the Name attribute text box at the General tab of the Image Properties dialog box.

See also


Restrict Text Length

JavaScript action

Description

Restrict Text Length validates if the text entered in a form fields exceeds the max length you specified. If it does, an alert message will show up. This action is usually associated with an Onblur event.

Parameters

Parameter | Description
Form Name | Name of the form.
Form Field Name | Name of the form field.
Message | The message to show when text exceed the maximum length.
Max Length | The maximum length of text, in number of characters. The default value is '5'.

See also


Rotate Window

JavaScript action

Description

This action rotates the window to finally reach to the position you specify. This action is associated with Onload event.

Parameters

Parameter | Description
Radius | Radius of the rotation.
Number of Rotation | The number of rotation the window will make.
Offset X | X coordinate of the final position.
Offset Y | Y coordinate of the final position.

See also


Scroll Page

JavaScript action

Description

This action scrolls the window upward or downward by the amount you specify.

Parameters

Parameter | Description
Length (Pixel) | Scrolling length, in pixels.
Direction | The direction of scrolling.

See also


Select Text

JavaScript action

Description

This action makes the entire text entered in a specific text form field be selected.

Parameters

Parameter | Description
Form Name | Name of the form.
Form Field Name | Name of the form field.

See also


Set Background Color

JavaScript action

Description

This action sets the background color of the document. This action is usually associated with OnClick or OnMouseOver event.

Parameters

Parameter | Description
Color | Background color for the document.

See also


Set Background Color of Layer

JavaScript action

Description

Set Background Color of Layer sets the background color of a layer . This action is usually associated with OnClick and OnMouseOver events.

Parameters

Parameter | Description
Target Layer | The the name of the target layer.
Color | The color to be used as a background color of the layer.

See also


Set Background Image

JavaScript action

Description

This action sets the background image of the document. This action is usually associated with OnClick and OnMouseOver events.

Parameters

Parameter | Description
Image | The path of the image file which will be used as a background image.

See also


Set Background Image of Layer

JavaScript action

Description

This action sets the background image of a layer . This action is typically associated with OnClick and OnMouseOver events.

Parameters

Parameter | Description
Target Layer | The name of the target layer.
Image | The path of the image file.

See also


Set Z-Index

JavaScript action

Description

This action allows you to specify the Z-index of a layer in the document . This action is typically associated with OnClick and OnMouseOver events. A Layer with larger Z-index value is placed over the layer with smaller Z-index value.

Parameters

Parameter | Description
Target Layer | Name of the target layer.
Z-Index | The integral value of Z-Index.

See also


Shake Windows

JavaScript action

Description

This action vibrates the window as many times as you specify.

Parameters

Parameter | Description
Number of Shaking Times | The number of times for window to vibrate.

See also


Shooting Status bar

JavaScript action

Description

This action displays text in the status bar by shooting characters one after another in specific intervals.

Parameters

Parameter | Description
Message | The message to be shown on in the status bar.
Intervals | The intervals of text animation.

See also


Show Layer

JavaScript action

Description

This action, when used along with the Hide Layer action, toggles the visibility of a layer, making it visible or invisible. This action has many uses, such as temporarily showing a description of an image when the site visitor moves the mouse pointer over the image, or creating a drop-down menu that appears when the site visitor moves the mouse pointer over the menu title and disappears when the mouse pointer exits the menu.

Parameters

Parameter | Description
Target layer | Select a layer from the drop-down menu.

See also


Show Object

JavaScript action

Description

This action makes a specified object visible in the document. You can change the visibility of objects by using this action along with Hide Object action.

Parameter

Parameter | Description
Object ID | The name of object.

See also


Spreading Window

JavaScript action

Description

This action opens a window by gradually enlarging the window from the initial size to the target size. This action is associated with OnLoad event.

Parameters

Parameter | Description
Initial Width | The initial width of the window, in pixels.
Initial Height | The initial height of the window, in pixels.
Target Width | The target width of windows, in pixels.
Target Height | The target height of windows, in pixels.
Width Speed | The enlarging speed of width.
Height Speed | The enlarging speed of height.

See also


Stop Time Line

JavaScript action

Description

This action stops playback of the specified Time Line at the moment the action is triggered, freezing the animation at the current frame. If the Time Line is not playing, nothing will happen. This action is often used in conjunction with the Play Time Line action to provide visitor control over the progress of an animation.

Parameters

Parameter | Description
Time Line name | The name of the Time Line. Select the Time Line from the drop-down menu.

See also


Stop Windows Media Player

JavaScript action

Description

This action allows you to stop the playback of Windows Media Player ActiveX control embedded in the document. This action is associated with Onclick and OnMouseOver event. (Internet Explorer compatible.)

Parameters

Parameter | Description
ID | The ID of the Windows Media Player ActiveX Control.

See also


Update Three Frames

JavaScript action

Description

This action allows you to update the contents of three frames at once.

Parameters

Parameter | Description
Frame 1 | The name of the first target frame.
URL 1 | The URL of the first target frame.
Frame 2 | The name of the second target frame.
URL 2 | The URL of the second target frame.
Frame 3 | The name of the third target frame.
URL 3 | The URL of the third frame.

Specify the protocol of the URL when you insert one as a parameter. For example, insert "http://www.namo.com" or "ftp://ftp.namo.com", instead of just "www.namo.com" or "ftp.namo.com".

See also


Update Two Frames

JavaScript action

Description

This action allows you to update the contents of two frames at once.

Parameters

Parameter | Description
Frame 1 | The name of the first target frame.
URL 1 | The URL of the first target frame.
Frame 2 | The name of the second target frame.
URL 2 | The URL of the second target frame.

Specify the protocol of the URL when you insert one as a parameter. For example, insert "http://www.namo.com" or "ftp://ftp.namo.com", instead of just "www.namo.com" or "ftp.namo.com".

See also


Validate Email

JavaScript action

Description

This action verifies if the email entered in a specific form field has a valid form of address. Alert Message, which you specify, will appear if the form field is left blank or it contains an invalid email address.

Parameters

Parameter | Description
Form Name | The name of form for validation.
Form Field Name | The name of form field.
Message | The message to show when the email address is of an invalid form.

See also


Validate Form

JavaScript action

Description

This action checks whether there is a blank text form field in the specified form. It generates an alert message if there is any blank text form field in the form.

Parameters

Parameter | Description
Form Name | Name of the form.
Message | The alert message to show when the form field is left blank.

See also


Wipe Layer

JavaScript action

Description

This action gradually changes the size and shape of the layer by moving three of four corners of the layer. Specify the two rectangles which decide the movement. This action is usually associated with Onload, OnClick and OnMouseOver event.

Parameters

Parameter | Description
Target Layer | The name of target layer.
Starting Top | Initial position of the top line of the layer, in pixels.
Starting Right | Initial position of the right line of the layer, in pixels.
Starting Bottom | Initial position of the bottom line of the layer, in pixels.
Starting Left | Initial position of the left line of the layer, in pixels.
Color | Color of the layer.
Ending Top | Final position of the top line of the layer, in pixels.
Ending Right | Final position of the right line of the layer, in pixels.
Ending Bottom | Final position of the bottom line of the layer, in pixels.
Ending Left | Final position of the left line of the layer, in pixels.
Step | The step of wiping effect.

See also


Write Last Update Information to Layer

JavaScript action

Description

This action displays the last update information in the layer you specify. This action is usually associated with Onload event.

Parameters

Parameter | Description
Target Layer | The name of the target layer to show the update information.
Font Color | Select the font color.
Font Size | Enter the font size.
Font | Select the font type.
Font Style | Select the font style of the text.
Font Weight | Select the font weight.

See also


Action window

[Window > Action], <Alt + 7>

Namo WebEditor lets you attach JavaScript actions to many kinds of document elements, including layers, form fields, images, hyperlinks, frames in a timeline, and even the document itself. Actions are triggered by events, such as a mouse click on the element. Whenever you add, modify, or remove an action, you do so using the Action window.
  • Event
    Displays the event specified under Information in the Action Properties dialog box.
  • Action
    Displays the action specified under Information in the Action Properties dialog box.
  • Add...
    Click to add an action to be attached to the current document element. The Action Properties dialog box will appear, where you specify what action to add, what event triggers it, and any parameters associated with the action.
  • Modify...
    Click to modify the selected action. You can change the action, the event, or the action's parameters in the Action Properties dialog box.
  • Remove
    Click to remove the selected action.


Action Properties dialog box

[Action window - Add.../Modify... button], [Window > Script Manager > Add.../Modify... button]
Namo WebEditor lets you attach JavaScript actions to many kinds of document elements, including layers, form fields, images, hyperlinks, frames in a timeline, and even the document itself. Actions are triggered by events, such as a mouse click on the element. Whenever you add or modify action, you use the Action Properties dialog box.

Information

  • Event
    Select the event that will trigger the action. The events shown in the drop-down menu will vary depending on what kind of document element the action is being attached to.
  • Action
    Select an action. The actions shown in the drop-down menu will vary depending on what kind of document element the action is being attached to.

Parameters

Set the action's parameters in this list box. Each action has its own set of parameters. For help on the parameters of a particular action, view the help for that action.

Description

Displays a brief explanation of the event selected from the Action drop-down menu.


What is a Database?

A database is, to put it in the most general terms, simply a collection of data. The "data" can be any kind of information, such as employee names, movie titles, cake recipes, etc. "Collection" means a set of similar data, such as a list of employee names, a book of recipes, and so forth. A list of music CDs is a kind of database, while a tuna fish sandwich and the state of Nevada are not, because those two items are neither data nor similar (except possibly in metaphorical terms).

In computer terms, a database is a file (or a set of files) that contains one or more collections of data that is organized in such a way you can store, manage, and operate. Telephone directory, address list, book list, and customer information in a bank or a department store are good examples of database.

A database stores each collection of similar data in a table. A music lover's database, for example, might have one table that contains information about every CD in her collection, another table that contains information a list of her favorite artists and songs, and so forth. Inside a table, the information about a single entity (a music CD, for example) is stored in a record. The record might contain such data as the CD's title, the artist's name, the title of each song, the length of each song, the total length, etc. Records are arranged by fields (also called entity or columns, by analogy with spreadsheet tables). Each field in a record contains one piece of data, such as the CD title.

Below is an example database table containing information about a music CD collection.

In the table, each row contains one record, while each column represents a field. When a database contains more than one table, it is common practice to refer fields by the table name and the field name together.

Databases can be created by many applications. Some popular ones include Microsoft Access, dBase, Paradox, and Oracle. Regardless of which application you use to create a database, if the database can be accessed through ODBC, you can use Namo WebEditor's Database Wizard to create database-enabled documents that access the information in the database.

top


What is a Database-Enabled Web Document?

A database-enabled (also called dynamic or database-driven) Web document is a Web document in which some or all of the content comes from a database. The benefit of getting content from a database is that when the data in the database changes, the Web document also changes, automatically.

In an ordinary (non-database-enabled) Web document, you provide all the content when you create the document. If you want to update the content, you have to open the document in a Web authoring tool (such as Namo WebEditor) and edit it by hand. Say you have a Web page that contains a list of all your music CDs, and you also have a Microsoft Access database that contains information about your CD collection. When you add a CD to your collection, if your Web document is an ordinary one, not only do you have to add the new CD info to your CD database, you also have to edit the Web document to insert the CD info there. But if your Web document is database-enabled, the Web page updates automatically when you update the database, saving your time and effort. The advantage is even clearer if you imagine a large online shopping site containing hundreds or thousands of pages with all kinds of frequently-changing data: product names, prices, stock status, and the like. Updating all those documents by hand whenever changes were made to the catalog would be extremely burdensome. But if the online merchant has all the information in a database, it makes sense to get the content of the Web pages from the database, thus avoiding the need for manual updates.

To "pull" data from a database and display it in a browser, database-enabled documents contain computer instructions (code) that tell the Web server where to look for the information in a database and how to present it. These instructions can be written in a variety of programming languages, including JavaScript, VBScript, and Java. Fortunately, you don't have to write any code to create a database-enabled document, because Namo WebEditor's Database Wizard generates the code - the script language which will be executed in the server - for you, after walking you through the process of selecting the database, selecting the parts of the database you want in your document, and deciding how to present the information to your Web site visitors.

Several different formats for database-enabled documents exist. Namo WebEditor supports the following three types:

  • Microsoft Active Server Pages (ASP)
    For more information, visit http://msdn.microsoft.com/workshop/server/asp/aspover.asp.
  • PHP Hypertext Preprocessor (PHP)
    For more information, visit http://www.php.net
  • Sun Java Server Pages (JSP)
    For more information, visit http://java.sun.com/products/jsp

top


Using the Database Wizard

The Database Wizard lets you create database-driven dynamic Web pages without any knowledge of Web programming by automatically generating the necessary instructions (code) to tell the Web server how to obtain information from a database and present it in a Web document.

There are seven basic steps in creating a database-enabled document with the Database Wizard:

  1. Create a new document, or open an existing one. Decide how you want to present the database information in the document. The wizard can create:
    - a table that shows multiple records, one record per row, with each column a field;
    - a view that shows multiple records in a list, with each field on its own line;
    - a view that shows a single record;
    - a chart that shows values from multiple records in a visual form;
    - a form that lets your site visitors enter new records; or
    - a form that lets your site visitors modify existing records.
  2. Select the command in the Database submenu of the Insert menu corresponding to the kind of database view you want to have. This will launch the Database Wizard.
  3. Specify the dynamic document format (ASP, PHP, or JSP) and the database connection method to use.
  4. Select a data source (your database) and supply your username and password, if any, to access the database.
  5. Select the database fields to use in the document.
  6. Specify a few options specific to the particular database view that you selected.

The Database Wizard does not create complete documents. Instead, it inserts a block into the current document open in the Edit window. A block is a region in a document that displays or lets visitors modify database records. Since the Database Wizard inserts a block into an existing document instead of generating a complete document, you retain full control over the formatting and the static (non-database-driven) content of the document.

The kinds of blocks that the Database Wizard can create are listed below:

Block Type | Description
Input Block | A form that lets site visitors enter new records into the database.
Modification Block | A form that lets site visitors modify existing records in the database.
Table Block | A table that displays multiple records arranging in rows and columns, with field names in the header row.
List Block | A table that displays multiple records arranged in rows, with field names inside each row.
Detail Block | A table that displays a single record.
Chart Block | A chart that presents numerical database information in visual form.

A single document can contain more than one block. However, some of the block types cannot coexist in the same document with other block type. Input, modification, table, and list blocks are all mutually exclusive, and only one of any kind can be in the same document. On the other hand, all block types can coexist with detail blocks and chart blocks, of which more than one can be in the same document.

To use the Database Wizard, you select a block type from the Database submenu in the Insert menu. Each block type uses a slightly different variant of the Database Wizard, named after the block type. The steps in each wizard are listed below. To go to the help page for any step, click the name of the step below.

Database Wizard Type | Step 1 | Step 2 | Step 3 | Step 4 | Step 5 | Step 6
Input Block | Document Type | Data Source | Database Fields | Block Elements | Input Method |
Modification Block | Document Type | Data Source | Database Fields | Selection Statement | Block Elements | Input Method
Table Block | Document Type | Data Source | Database Fields | Selection Statement | Block Elements | List Settings
List Block | Document Type | Data Source | Database Fields | Selection Statement | Block Elements | List Settings
Detail Block | Document Type | Data Source | Database Fields | Selection Statement | Block Elements |
Chart Block | Document Type | Data Source | Database Fields | Selection Statement | Chart Settings |

top


Requirements for Using the Database Wizard

Before you use the Database Wizard, please make sure that you meet the following basic requirements.

  • An ODBC-compatible database
    The Database Wizard creates dynamic documents that obtain all or part of their content from a database. Thus, a database is required to use the wizard. The database should reside on a server on the same local area network as your computer and the Web server (this could be the Web server itself). Namo WebEditor supports ODBC, JDBC, and TCP/IP (for MySQL databases) connections from the Web server to the database. However, Namo WebEditor itself uses only ODBC to connect to the database for the purpose of obtaining information about the fields in it; therefore, the database must support ODBC.
  • Microsoft Personal Web Server (PWS) or Internet Information Server (IIS) installed on your computer
    To be able to preview database-enabled documents that you create using the Database Wizard, you must have either Microsoft Personal Web Server (PWS) or Microsoft Internet Information Server (IIS) software installed on the computer on which you use Namo WebEditor.

    • Additional software is required in order to preview PHP or JSP documents. For PHP documents, you need PHP for Windows, downloadable from the official PHP site at http://www.php.net. For JSP documents, you need JSP server software for Windows installed on your computer. Please refer to Sun Microsystems' list of JSP servers at http://java.sun.com/products/servlet/industry.html.

  • Web server software that supports ASP, PHP, or JSP documents
    Depending on which dynamic document format you wish to use, your Web server software should be capable of executing ASP, PHP, or JSP-format documents.
    • If your Web server runs Microsoft IIS or PWS, no additional software is required to run ASP scripts.
    • If your Web server runs Unix or Linux and you wish to use ASP, you must have a program capable of running ASP scripts, such as Chili!Soft ASP, installed on your Web server. You can download ChillSoft ASP at http://www.chilisoft.com.
    • If you wish to use PHP, you must have the appropriate PHP server software for your operating system installed on your Web server. This may be downloaded from http://www.php.net.
    • If you wish to use JSP, you will need the appropriate JSP server software for your operating system installed on your Web server. For more information, please refer to the following Web sites:
      • Sun's definitive list of servlet runners at http://java.sun.com/products/servlet/industry.html
      • IBM WebSphere http://www-4.ibm.com/software/webservers/appserv/
      • Jakarta Tomcat http://jakarta.apache.org/
      • Allaire JRun http://www.allaire.com/
      • GnuJSP http://www.klomp.org/gnujsp/

See also

top


Setting Up a Database Connection

Before using the Database Wizard, you need to set up a connection on your computer to your database so that the Database Wizard can access it. In addition, your Web server also needs to be able to connect to your database so that it can obtain data from it when visitors open your database-enabled document in a browser.

The Database Wizard itself requires an ODBC connection to your database. However, your Web server may use an ODBC connection, a JDBC connection (for JSP documents), or a TCP/IP connection (for MySQL databases) to the database.

Setting up an ODBC connection

To set up an ODBC connection on your computer to your database, follow the steps below. If your Web server will also use an ODBC connection to the database, repeat the steps on the server.

  1. Click the Start button in the Windows task bar, point to Settings, and then click Control Panel.
  2. If your operating system is Windows 95, 98, NT, or ME, double-click ODBC Data Sources. If your operating system is Windows 2000, double-click Administrative Tools, and then double-click Data Sources (ODBC).
  3. Click the System DSN tab.
  4. Click Add, then select the appropriate driver for your database type. For example, if you have a Microsoft Access database, select Microsoft Access Driver. Then click Finish.
  5. In the next dialog box, in the box next to Data Source Name, type the name you wish to use for this data source. Select the database file, and then click OK.
  6. Your new data source should now appear in the list under System Data Sources. Click OK to exit the Data Sources control panel.

Setting up a JDBC connection

JDBC is a Java API (application programming interface) which allows you to run SQL on Java-based programs. Like ODBC, JDBC connects to the target database system, sends SQL queries, and passes the results to the application. For detailed information on JDBC, refer to Sun Microsystems' Web site at http://java.sun.com/products/jdbc/.

Database vendors offer various JDBC interfaces, called JDBC drivers. One example is the Thin Driver offered by Oracle. You should consider the type of server-side script and database system when deciding which JDBC driver to use. To find a JDBC driver compatible with your database system, visit Sun Microsystems' JDBC driver search page at http://industry.java.sun.com/products/jdbc/drivers. If you wish to use a JDBC-ODBC bridge, you need to install the Sun Java Development Kit (JDK) on your computer. The Sun JDK is available at http://java.sun.com/j2se/.

Setting up a TCP/IP connection to a MySQL database

If you intend to create PHP documents that connect to a MySQL database, your Web server can connect to the database directly, without going through ODBC, using a direct TCP/IP connection. To use a direct TCP/IP connection, select PHP in the first step of Database Wizard, specify the host and port number where the MySQL database is stored, and specify your user ID and password in the second step.

See also

top


Creating an input block

An input block is used to allow your site visitors to enter new records into a database.

To create an input block, do this:

  1. Create a new document or open an existing document.
  2. Select the [Insert > Database > Input Block...] command. This will start the Database Wizard.
  3. Select a dynamic document format and click Next.
  4. Select a data source and click Next.
  5. Select database fields from one or more tables and click Next.
  6. Confirm that the block element list is correct. If you wish to replace one or more of the input fields with input controls, you can do so now by clicking Add and selecting Drop-Down Menu or Radio Button Group in the drop-down menu. However, it may be easier to add the input controls after finishing the wizard. Click Next.
  7. Select an input method: GET or POST. This is the method used to send the information entered in the input block by a site visitor to the Web server. POST is the recommended method when the submitted information will be saved by the server, such as in a database. Since this is the case, select POST unless you have a specific reason to choose GET.
  8. Optionally, enter a URL or relative path under Result URL. When the site visitor clicks the submit button to submit the information in the block, the specified document will be opened by the browser. If no result URL is specified, the generic message "Input process complete." will be displayed.
  9. Click Finish.

After completing the Database Wizard, you can replace one or more of the input fields with drop-down menus or radio button groups.


Creating a modification block

A modification block is used to allow site visitors to edit existing records in a database. It is similar to an input block, except that instead of presenting a blank form to the visitor, the form is already filled out with the information in an existing record.

To create a modification block, do this:

  1. Create a new document or open an existing document.
  2. Select the [Insert > Database > Modification Block...] command. This will start the Database Wizard.
  3. Select a dynamic document format and click Next.
  4. Select a data source and click Next.
  5. Select database fields from one or more tables and click Next.
  6. In the Selection Statement step, enter a where statement to specify which record to display in the block, and then click Next. (See below for more information.)
  7. Confirm that the block element list is correct. If you wish to replace one or more of the input fields with input controls, you can do so now by clicking Add and selecting Drop-Down Menu or Radio Button Group in the drop-down menu. However, it may be easier to add the input controls after finishing the wizard. Click Next.
  8. Select an input method: GET or POST. This is the method used to send the information entered in the input block by a site visitor to the Web server. POST is the recommended method when the submitted information will be saved by the server, such as in a database. Since this is the case, select POST unless you have a specific reason to choose GET.
  9. Optionally, enter a URL or relative path under Result URL. When the site visitor clicks the submit button to submit the information in the block, the specified document will be opened by the browser. If no result URL is specified, the generic message "Input process complete" will be displayed.
  10. Click Finish.

As with a detail block, you must enter a where statement that selects exactly one record. If you do not enter a where statement, the modification block will simply display the first record in the database table, and when the site visitor clicks the submit button, the information in all of the records will be replaced by the submitted information. If you enter a where statement that does not select a unique record, the block will display the first matching record, and the information in all matching records will be replaced by the submitted information.

top


Creating a table block

Table and list blocks are both used to display multiple records. A table block displays records in rows and columns, like a spreadsheet; while a list block displays records sequentially, with each output field in its own row.

To create a table block, do this:

  1. Create a new document or open an existing document.
  2. Select the [Insert > Database > Table Block] command. This will start the Database Wizard .
  3. Select a dynamic document format and click Next.
  4. Select a data source and click Next.
  5. Select database fields from one or more tables and click Next.
  6. Enter optional selection statements—such as a join statement if you included database fields from more than one table in the previous step—and then click Next.
  7. If necessary, edit the block element list and then click Next.
  8. In the List Settings step, specify the number of records to display per page, and then click Finish.


Creating a list block

Table and list blocks are both used to display multiple records. A table block displays records in rows and columns, like a spreadsheet; while a list block displays records sequentially, with each output field in its own row.

To create a list block, do this:

  1. Create a new document or open an existing document.
  2. Select the [Insert > Database >List Block] command. This will start the Database Wizard.
  3. Select a dynamic document format and click Next.
  4. Select a data source and click Next.
  5. Select database fields from one or more tables and click Next.
  6. Enter optional selection statements—such as a join statement if you included database fields from more than one table in the previous step—and then click Next.
  7. If necessary, edit the block element list and then click Next.
  8. In the List Settings step, specify the number of records to display per page, and then click Finish.

Once you complete the Database Wizard, the table or list block will appear at the cursor in the current document. Format the block and add static content as desired.


Creating a detail block

A detail block is used to display a single record, selected by ID number or some other criterion.

To create a detail block, do this:

  1. Create a new document or open an existing document.
  2. Select the [Insert > Database > Detail Block] command. This will start the Database Wizard.
  3. Select a dynamic document format and click Next.
  4. Select a data source and click Next.
  5. Select database fields from one or more tables and click Next.
  6. In the Selection Statement step, enter a where statement to specify which record to display in the block, and then click Next. (See below for more information.)
  7. If necessary, edit the block element list as described in Adding and removing block elements, and then click Finish.

Unlike most other block types, for a detail block you must enter a where statement that selects exactly one record. If you do not enter a where statement, the detail block will simply display the first record in the database table. If you enter a where statement that does not select a unique record, the block will display the first matching record.

One way to uniquely specify a record to display is to specify the value in a field that is constrained to have unique values, such as an ID field. For instance, you could enter a where statement such as Customers.ID = 7 in order to select one customer record by ID number.

If you link to a detail block using a hyperlinked output field, the where statement must be in the following form:

    table.field = <a,argument_name>

This statement compares the values in the specified field with the value of an argument passed to the detail block by the hyperlink.

top


Creating a chart block

Database table format requirements

Steps to create a chart block

Obtaining series and category labels from the database

Entering series and category labels manually

Publishing a document with a chart block

A chart block takes numerical values from one or more database tables and depicts them in chart or graph form.

Database table format requirements

There are certain restrictions in the way a table can be formatted, if it will serve as a data source for a chart block:

  • The chart block can only use one numerical value per record. If a table has more than one number field, only one will be used by the chart block.
  • If you wish the chart block to obtain labels from the table, the table must provide both series and category labels. If the table provides only one or the other, the chart block cannot use the labels, and you must enter them manually.

Below are some examples of tables formatted appropriately for use with a chart block.

Example 1

Record_ID | Country | Product | Unit_Sales
1 | United States | Widgets | 796
2 | United States | Gewgaws | 520
3 | Sweden | Widgets | 359
4 | Sweden | Gewgaws | 425
5 | Japan | Widgets | 311
6 | Japan | Gewgaws | 701

This table is ideal for use with a chart block. There is only one number field, and there are two string fields, one of which will be used as the source of series labels and the other, category labels. The chart produced from this table can have either two series and three categories, or three series and two categories, depending on whether the countries are series and the products are categories, or the reverse is true.

Example 2

Record_ID | Subject | Month | Value
1 | Mean Temperature | January | 30
2 | Mean Temperature | February | 40
3 | Mean Temperature | March | 47
4 | Mean Temperature | April | 55
5 | Mean Temperature | May | 60
6 | Mean Temperature | June | 65

This table is also well-formatted for use with a chart block. In this table, there is only one series (Mean Temperature), and there are six categories (the months).

Example 3

Record_ID | Value
1 | 796
2 | 520
3 | 359
4 | 425
5 | 311
6 | 701

This table provides only values, no labels. The series and/or category labels must be entered manually. The number of series and categories must also be specified manually.

Steps to create a chart block

  1. Create a new document or open an existing document.
  2. Select the [Insert > Database > Chart Block...] command. This will start the Database Wizard.
  3. Select a dynamic document format and click Next.
  4. Select a data source and click Next.
  5. Select database fields from one or more tables and click Next.
  6. Enter optional selection statements—such as a join statement if you included database fields from more than one table in the previous step—and then click Next.
  7. In the Chart Settings step, select the database field from which to obtain the numerical values, using the Values drop-down menu under Source fields. Only number fields appear in the menu
  8. Select the database fields from which to obtain Series names and Category names, or select Enter manually to enter the names manually later. Then, click Next.
  9. Select a chart type and subtype, and then click Next. (This step is identical to the first step of the Chart Wizard.)
  10. Optionally, enter a title for the chart and its X and Y axes, and then click Finish. (This step is identical to the last step of the Chart Wizard.)

The chart block will be inserted into the current document. To modify its appearance, double-click it and use the Chart Type, Title, Series, Trendlines, Axis, and Chart Formatting tabs in the Chart Block Properties dialog box.

Obtaining series and category labels from the database

To obtain series and category labels for the chart block from the database, do this:

  1. In the Chart Settings step of the Database Wizard, select Retrieve from database under Source.
  2. In the Series name drop-down menu under Source fields, select the database field that will provide the series labels.
  3. In the Category names drop-down menu, select the database field that will provide the category labels. After completing the Database Wizard, if you decide to use different fields for the series and/or category label sources, you can change the selections in the Chart Block Settings tab of the Chart Block Properties dialog box. To open the dialog box, double-click the chart block.

Entering series and category labels manually

To enter series and category labels manually, do this:

  1. In the Chart Settings step of the Database Wizard, under Source, select Enter manually.
  2. Enter the Number of categories and the Number of series you wish the chart to have.
  3. Complete the Chart Wizard.
  4. In the Edit window, double-click the chart block to open the Chart Block Properties dialog box, and then click the Series tab.
  5. Select a series in the list box on the left side of the dialog box, and then enter a label for the series under Series name. Repeat for each series.
  6. Click the Values tab.
  7. In the spreadsheet-like table at the top of the dialog box, enter a category label in each of the green cells under the Category heading. To enter a label, double-click the cell, type the label, and then press <Enter>.
  8. Click OK.

To confirm that the labels were entered correctly, switch to the Preview window.

Publishing a document with a chart block

A chart block is different from other kinds of blocks that the Database Wizard creates in that it requires a piece of software, in addition to the Web server software, to generate its contents. This additional software is in the form of a CGI program that the Database Wizard places, by default, in the same folder in which you save the chart block document. When you publish a document containing a chart block, you must publish the CGI program along with the document. If you do not, your site visitors will not be able to see the chart. Keeping the CGI program in the same folder as the document facilitates publishing, since in most cases you would publish the entire contents of the document folder anyway.

However, you may need to store the CGI program in a folder on your Web site other than the folder containing the chart block document. This could be the case if the public access rights on the document folder do not include "execute" permission, in which case CGI programs in the document folder cannot be executed.

If you need to store the CGI program in a different folder, such as a cgi-bin folder in your home directory, you must specify the path to the CGI program in the chart block's properties. To do this, you first need to know the filename of the CGI program. Refer to the table below to determine the correct filename.

If your Web server's operating system is: | the CGI program's filename is:
Windows | wed_chart_window.cgi
Linux | wed_chart_linux.cgi
Solaris | wed_chart_solaris.cgi
Solaris x86 | wed_chart_solaris_x86.cgi
FreeBSD | wed_chart_freebsd.cgi

Once you know the CGI program's filename, you can construct the appropriate path to specify in the chart block's properties. To construct the path, simply append the CGI program's filename to the path of your CGI folder. For instance, if your CGI folder is in your home directory, the CGI folder is named cgi-bin, your server runs Windows, and you will store the chart block document in your home directory, then the correct path is cgi-bin/wed_chart_windows.cgi.

To specify the path in the chart block's properties, do this:

  1. Double-click the chart block to open the Chart Block Properties dialog box, and then click the Chart Block Settings tab.
  2. Under CGI path, enter the path to the CGI program.
  3. Click OK.

Once you change the path specification, you will not be able to preview the chart unless you copy the CGI program to the same location on your hard drive, relative to the document, as the location specified in the path. For instance, if your CGI program path is cgi-bin/wed_chart_windows.cgi, you should create a cgi-bin folder in the document folder and copy wed_chart_windows.cgi to it. The CGI programs may be found in Namo WebEditor 5's program folder, under lib/DBWizard. If you installed Namo WebEditor in the default installation folder, the folder path is:

    C:\Program Files\Namo\WebEditor 5\lib\DBWizard\

When publishing the chart block document, make sure to publish the CGI program to the correct folder on your Web site, as well.

top


Connecting to a Microsoft Access database

Before you use the Database Wizard, you must create a connection to your database using the Data Sources control panel. Follow the steps below to connect to a Microsoft Access database.

  1. Click the Start button in the Windows task bar, point to Settings, and then click Control Panel.
  2. If your operating system is Windows 95, 98, NT, or ME, double-click ODBC Data Sources. If your operating system is Windows 2000, double-click Administrative Tools, and then double-click Data Sources (ODBC).
  3. Click the System DSN tab.
  4. Click Add, select Microsoft Access Driver, and then click Finish.
  5. In the box next to Data Source Name, type the name you wish to use for this data source.
  6. Click Select..., navigate to your Microsoft Access database, select it, and then click OK.
  7. If you wish to protect this data source with a password, click Advanced..., enter a login name and password, and then click OK.
  8. Click OK twice to exit the Data Sources control panel.

Now you're ready to use the data source you just defined. Your data source will appear in the Data source drop-down menu in step 2 of the Database Wizard.

If your Web server will use ODBC to connect to the database, you must also set up the data source on the server.

Creating a data source in the Database Wizard

Alternatively, you can create a connection to your database within the Database Wizard, without using the Data Source control panel.

  1. In step 2 of the Database Wizard, in the Data source drop-down menu, select <Make New DSN>.
  2. Select System Data Source and click Next.
  3. Select Microsoft Access Driver, click Next, and then click Finish.
  4. Follow steps 5-7 above.
  5. Proceed to the next step of the Database Wizard.

top


Selecting a dynamic document type

Selecting a script type

Specifying the database type

Specifying the server OS

Document Type, the first step in the Database Wizard for all block types, involves selecting a dynamic document type (ASP, PHP, or JSP), specifying the database connection type, and specifying the operating system of the Web server that will serve the database-enabled document.

Selecting a script type

In the Script type menu, select the dynamic document format you wish to use. There are three choices: ASP, PHP, and JSP.

ASP (Active Server Pages) is Microsoft's proprietary format for dynamically updated Web documents. Microsoft's Web server programs—Internet Information Server (IIS) and Personal Web Server (PWS)—have built-in support for ASP. On other platforms, ASP support is provided by third-party software such as Chili!Soft ASP. If your Web server runs IIS or PWS, ASP is probably the best choice for the document format.

PHP (PHP Hypertext Preprocessor) is an open source format for dynamically updated Web documents. It is similar in function to ASP, but non-proprietary. PHP software for most server platforms may be freely downloaded from the PHP home page at http://www.php.net.

JSP (Java Server Pages) is very much like ASP except that the programming language is Java instead of VBScript or JavaScript. For more information about JSP, refer to http://java.sun.com/products/jsp.

Specifying the database type

In the Database menu, specify the type of database that the current document will connect to. This actually determines how the document will connect to the database. The database types available in the menu depend on which script type is selected:

  • If the script type is ASP, the only available database type is ODBC. The document will use an ODBC connection to any database that supports ODBC.
  • If the script type is PHP, the available database types are ODBC and MySQL. Choose ODBC if you wish the document to use ODBC to connect to a database that supports it. Choose MySQL if the document will connect to a MySQL database and you wish to use a TCP/IP connection.
  • If the script type is JSP, the menu will list several database types in addition to ODBC. Select the type corresponding to your database. For example, if you are using an Oracle database, select Oracle. If your database type is not listed, select ODBC if you wish to use ODBC and the database supports it; otherwise, select User-defined. If you select User-defined, you will need to specify the driver to be used to connect to the database in the second step of the Database Wizard.

Specifying the server OS

In the Server OS menu, specify the operating system of the Web server that will serve the database-enabled document. This setting is only important if you are creating a chart block, in which case the setting is used to determine the appropriate CGI program that will be used to dynamically generate the chart. If the current document will not contain a chart block, this setting is ignored.

top


Specifying a data source

In Data Source, the second step of the Database Wizard for all block types, you specify a data source (database) from which to obtain the dynamic content of the block. If necessary, you can also enter a user ID and password to access the data source.

The content of this dialog box depends on which database type you have selected in the first step of the Database Wizard.

Click here if you are using an ODBC data source.

Click here if you are using a JDBC data source.

Click here if you are using a TCP/IP connection to a MySQL database.


Adding and removing block elements

Types of block elements

Editing the element list

Block Elements is the fourth step of the Database Wizard for input blocks, and the fifth step for table, list, detail, and modification blocks. This step does not apply to chart blocks.

In this step, you select the elements that will compose the block.

Block elements are the "bricks" database-enabled documents are made of. Each block element provides one part of the active (i.e., dynamically generated) content of the document when it is viewed in a browser. For instance, if a table block has an output field element, values in the database field corresponding to the output field will appear in the block when viewed in a browser. Thus, the combination of block elements in a block determines what kind of active content - which database fields - will appear in the database-enabled document.

Types of block elements

There are five basic types of elements that a block can have:

Output fields | An output field displays the value in a particular database field for each record displayed in the block.
Input fields | An input field allows a site visitor to enter a value for a particular database field for one record.
Input controls | An input control is like an input field, but lets site visitors select an item from a group of predefined items, using the mouse.
Hidden fields | A hidden field is used to insert a value into a database record without allowing the site visitor to change it.
Page link sets | A page link set allows site visitors to view additional records in a table or list block by moving to another page of records.

Not every element type can exist in every block type. Output fields are appropriate for table, list, detail, and (sometimes) modification blocks. Input fields and input controls can only exist in input and modification blocks. Hidden fields are only useful in modification blocks. Page links can only exist in table and list blocks.

Except for page link sets, each element type has two or more subtypes. These are listed in the table below, along with the block types they can exist in.

Element type |  | Element properties
Input fields | Number input field | DB field name, default value, width, max input length
 | String input field | DB field name, default value, width, max input length
 | Text input field | DB field name, default value, width, number of lines
 | Date input field | DB field name, default value, date format
Hidden field |  | DB field name, default value
Page link sets |  | Table, list
Input controls | Drop-down menu | DB field name, menu items source field, item values source field, default value
 | Radio button group | DB field name, button labels source field, button values source field, default value
Output fields | Output field | DB field name
 | Output field (hyperlink) | DB field name, target URL, send parameters

In addition to the element types already mentioned, there is one other type of block element, which can only exist in chart blocks: a chart element.

Editing the element list

Initially, the list of elements in the block you are creating contains one input or output field for each database field you selected in the Database Fields step of the wizard. Additionally, if the block is a table or list block, the element list includes a page link set so that site visitors can see additional pages of records.

In many cases, there is no need to edit the element list. There are, however, some situations in which you should remove or add elements, particularly if you included database fields from more than one table in the database.

You may also at times wish to add elements to the block. For example, you could replace an input field with a drop-down menu or a radio button group, so that your site visitors are limited to selecting only certain predefined items to input into a database field. If you have, say, an input block that serves as an order form, you might replace a products input field with a products drop-down menu, so that your site visitors cannot input a nonexistent product.

To add an element to the block, do this:

  1. Click the Add button. A drop-down menu listing the applicable element types will appear.
  2. Select an element type from the menu, and the properties dialog box for the selected element type will appear.
  3. Fill out the properties dialog box and click OK.

You can also add elements to a block in the Edit window, after completing the Database Wizard.

top


Selecting database fields

Selecting fields from a single table

Selecting fields from multiple tables

Database Fields, the third step of the Database Wizard for all block types, involves selecting the fields in your database that will be displayed in the block.

The hierarchical list on the left side of the dialog box lists all the tables in the data source you specified in the previous step of the Database Wizard. Clicking the small plus sign next to a table name reveals the fields in that table.

The list on the right side shows the names of the fields that will be used in the block, along with each field's data type and other information. To add a field to this list, select it in the list on the left and click Add. To add all the fields in a table at once, select the table and click Add. To remove a field from the list on the right, select it and click Remove. To remove all the fields in the list on the right and start over, click Delete.

Depending on the block type, you may be able to select fields from more than one table for inclusion in the block. If you are creating an input or modification block, only fields from one table may be included. However, for any other block type (the output types), you may add fields from multiple tables. If you do, you will need to enter a join statement in the Selection Statement step of the wizard, in order to specify how the tables are to be related.

For displaying records from simple databases, you often only need to choose fields from one table. (Indeed, your database may only have one table.) However, for displaying records from more complex databases, selecting fields from multiple tables can be essential.

Selecting fields from a single table

Say we have a one-table database that contains a list of customer orders. The record structure is as follows:

Field Name | Data Type
ID | number
Date | date
Customer | string
Product | string
Quantity | number

In order to create a table block to display all the information in this database, we only need select all the fields in the single database table. Since there are no other tables in the database, there's no need to select fields from other tables.

The first three records displayed in our table block might look something like this:

ID | Date | Customer | Product | Quantity
1 | 8/5/00 | John Doe | Namo WebEditor 4 | 5
2 | 8/12/00 | Jane Deer | DeepSearch 3.0 | 1
3 | 8/27/00 | Bill Blast | Namo WebEditor 5 | 10

Selecting fields from multiple tables

Now, let's consider a more complicated case involving multiple tables. Say our database has two tables: one, named Orders, contains a list of orders. The other table, named Customers, stores information on each of our customers. The Orders table has the following record structure:

Field Name | Date Type
Orders.ID | number
Orders.Date | date
Orders.Customer | number
Orders.Product | string
Orders.Quantity | number

And the Customers table has this structure:

Field Name | Date Type
Customer.ID | number
Customers.Name | string
Customers.Street | string
Customers.City | string
[...and so on] | [...]

Whereas in the single-table database, customers were identified by name, in the two-table database, customers are identified by ID number. The ID numbers in Orders.Customer correlate with the ID numbers in Customers.ID.

What would happen if, when choosing fields for our database-enabled document, we selected only the fields in the Orders table and didn't select any fields from the Customers table? The first three records of our table block would look like this:

ID | Date | Customer | Product | Quantity
1 | 8/5/00 | 106 | Namo WebEditor 4 | 5
2 | 8/12/00 | 33 | DeepSearch 3.0 | 1
3 | 8/27/00 | 418 | Namo WebEditor 5 | 10

Obviously, having ID numbers appear in the Customer column is not very useful. We would like to have customer names appear in the Customer column. To make this happen, we need to select two fields from the Customers table—Customers.ID and Customers.Name—in addition to the fields in the Orders table. By doing so, our document can match up the numbers in Orders.Customer to the numbers in Customers.ID, and thus find the right customer names to display. This matching up of tables is done using a join statement entered in the Selection Statement step of the Database Wizard.

top


Adding an input field

An input field is a block element that allows site visitors to enter a value for a particular database field in a particular record. Input fields, along with input controls, are the main elements of input and modification blocks. Input fields cannot be added to any other kind of block.

There are four types of input fields, corresponding to four data types: number, string, text, and date. In a database, each field has an assigned data type, so you must use the right kind of input field for it.

To add an input field, do this:

  1. Place the cursor at the location inside an input or modification block where you wish the field to be inserted. (The cursor must be inside the block.)
  2. Select any of the input field commands in the [Insert > Database] submenu, such as [Insert > Database > Number Input Field...]. The Input Field Properties dialog box corresponding to the selected input field type will appear.
  3. Click the Input Field Settings tab.
  4. In the Target field drop-down menu, select the database field that will accept the value entered into the input field. Only database fields of the same data type as the input field will appear in the menu.
  5. If you are adding the input field to a modification block, click the [image] button next to the Default value text box and select the same database field you selected for the target field. (In the drop-down menu, database field names appear inside angle brackets, preceded by "f,". For example, <f,Customers.Name>.)
  6. If you are adding the input field to an input block, you can optionally specify a default value for the field. In the Default value text box, enter either a static value or the name of a parameter that will supply the default value. Click the [image] button to select a parameter from among the parameters that have been defined in Parameters tab of the Document Header Properties dialog box.
  7. If you are adding a number or string input field, specify the Width in characters and the Maximum input length (also in characters).
  8. If you are adding a text input field, specify the Width in characters and the height of the field in Number of lines.
  9. If you are adding a date input field, specify the Date format. Use "yy" to represent the year, "mm" for the month, "dd" for the day, "hh" for the hour, "mi" for the minute, and "ss" for the second. You may use any character as separators. You can use the drop-down menu to select from several preset formats.
  10. Click OK.

To enter values into a Boolean ("true/false" or "yes/no") database field, use a number input field. 1 = true; 0 = false.

top


Adding a hidden field

A hidden field is used in an input or modification block to insert a value into a database record without allowing the site visitor to change it. For instance, you could replace an input field with a hidden field for the ID field of a database, so that site visitors will not be able to modify the ID number.

To add a hidden field, do this:

  1. Place the cursor at the location inside the input or modification block where you wish the field to be inserted. (The cursor must be inside the block.)
  2. Select the [Insert > Database > Hidden Field...] command. The Hidden Field Properties dialog box will appear.
  3. In the Target field drop-down menu, select the database field that will accept the value of the hidden field.

  4. In the Default value text box, enter a value for the hidden field. If the hidden field is in a modification block, the value can be supplied from a database field among the fields you selected in the Database Fields step of the Database Wizard. The value contained in that field for the selected record will be used as the value of the hidden field when the document is displayed in a browser. Click the [image] button to select a database field.
  5. Click OK.

By default, a hidden field is not actually invisible. The value in a hidden field is visible in a browser. To make the hidden field effectively invisible, select the small yellow mark representing the hidden field in the Edit window, and use the Font Color menu in the Formatting Toolbar to apply the color of the document's background to the hidden field.

top


Adding a drop-down menu or radio button group

Drop-down menus and radio button groups - collectively called input controls - are block elements that allow a site visitor to select one item from a list. The items in the list are provided by one database field (and their associated values potentially provided by another). Selecting an item from an input control has the same result as typing the value in an input field, but input controls offer the advantage of limiting what can be entered so that site visitors cannot input invalid values by mistake.

When you use a drop-down menu or a radio button group, the value that is inputted using it may be different from the item selected by the site visitor. For instance, in the radio button group pictured below, when the site visitor selects the "Visa" item, the word "Visa" is not necessarily the value that will be entered into the database. Although the value that is sent to the database could be the same as the item (the word "Visa"), it might be something else, such as the number 3.

Whether the values are the same as the items is your choice. If the database field into which the selected value will be entered is a number field, the values must be numbers; however, you'll probably wish to obtain the input control's items from a different database field, which contains words instead of numbers. Therefore, when you add a drop-down menu or a radio button group, you must specify not only the database field that will provide the input control's items, but also the field that will provide the associated values - even if the items and their values are identical.

To add a drop-down menu or a radio button group, do this:

  1. Place the cursor at the location inside an input or modification block where you wish the field to be inserted. (The cursor must be inside the block.)
  2. Select the [Insert > Database > Drop-Down Menu...] command or the [Insert > Database > Radio Button Group...] command. This will start a variation of the Database Wizard for the selected input control.
  3. In the second step of the Database Wizard, select an ODBC data source, enter a user ID and password if necessary, and then click Next.
  4. In the Database Fields step, in the hierarchical list on the left, select the source database field for the items in the input control. If the items and their associated values will be different, also select the source field for the values, and then click Add. Then, click Next.
  5. Optionally enter a where statement to specify which records to use (leave blank to use all records) and/or an order statement to specify how to sort the records. Then, click Next.
  6. In the Target field drop-down menu, select the database field that will receive the value selected by the input control.
  7. In the Menu items source field or Button labels source field drop-down menu—depending on which type of input control you are adding—select the source database field for the items in the input control.
  8. In the Item values source field or Button values source field drop-down menu, select the source database field for the values associated with the items in the input control.
  9. If you are adding the input control to a modification block, click the [image] button next to the Default value text box and select the database field that will supply the default value for the input control. (This is usually the same as the target field.)
  10. If you are adding the input control to an input block, you can optionally specify a default value for the control. In the Default value text box, enter either a static value or the name of a parameter that will supply the default value. Click the [image] button to select a parameter from among the parameters that have been defined in Parameters tab of the Document Header Properties dialog box.
  11. Click Finish.

top


Adding an output field

An output field is a block element that displays the value in a database field. Output fields (and optionally, hyperlinked output fields) are the basic constituents of table, list, and detail blocks. You can also add an output field to a modification block, if you wish to show the value in a particular field without letting site visitors modify it.

To add an output field, do this:

  1. Place the cursor at the location inside a block where you wish the field to be inserted. (The cursor must be inside the block.)
  2. Select the [Insert > Database > Output field] menu command. The Output Field Settings dialog box will appear.
  3. Click the [image] button next to the Database field text box and select the database field whose contents you wish to display in the output field, and then click OK.

If the database field you wish to use does not appear in the Database field drop-down menu, you must add it to the list of included database fields in the block properties. To add a database field, do this:

  1. Right-click anywhere inside the block and select Block Properties. The Block Properties dialog box corresponding to the current block will appear.
  2. Click the Database fields tab.
  3. Select the desired database field in the hierarchical list on the left side of the dialog box and click Add. The selected field will appear in the list of included fields on the right.
  4. Click OK.

Use the [Insert > Database > Output field] command again and select the newly-added database field in the drop-down menu.


Adding a hyperlinked output field

A hyperlinked output field, like an ordinary output field, displays the value in a database field. However, it also acts as a hyperlink to another document, such as one containing a detail or modification block. By clicking the hyperlinked output field, a site visitor can view or modify the record corresponding to the item in the output field.

When you use a hyperlinked output field to link to a detail or modification document, the hyperlink passes to the document an argument that contains a unique identifier of the record to be displayed in the detail or modification block. The detail or modification block must therefore contain a declaration of the argument, so that the block "knows" what to do with the argument.

To set up a hyperlinked output field that links to a document containing a detail or modification block, do this:

  1. In the document that the hyperlinked output field will link to, right-click anywhere inside the detail or modification block and select {Database > Document Properties...} in the shortcut menu. The Document Header Properties dialog box will appear. Click the Parameters tab.
  2. Click Add. A new argument with the temporary name "<New Arg>" will be added.
  3. Type a name for the new argument and press <Enter>. You can name it anything you like, as long as the name contains no spaces or punctuation other than underscores. Then, click OK.
  4. Save the document, and then switch to the document in which you wish to add the hyperlinked output field.
  5. Place the cursor at the location in the block where you wish to add the hyperlinked output field.
  6. Select the [Insert > Database > Output Field (Hyperlink)...] command. The Output Field (Hyperlink) dialog box will appear.
  7. Click the [image] button next to the Database field text box and select the database field whose contents you wish to display in the hyperlinked output field. You can also enter a static string, such as "Previous" of "Next" if you wish. When you enter a static string, it has to be inserted with a double quotation marks (" "). If you wish to insert an image, type in the image tag with a double-quotation marks. However, when you insert an image tag in the Database field text box, no quotation marks should be inserted inside the <img> tags.

  8. In the URL text box, enter the URL or relative path to the document you wish the hyperlinked output field to link to.
  9. In the Name text box under under Parameters, type the name of the argument you added in the other document.
  10. Click the [image] button next to the Value text box and select the database field whose value will be passed to the other document.
  11. Click OK to close the Output Field (Hyperlink) dialog box.

top


Setting up a hyperlink to a detail block

The most practical way to use a detail block is to let it display the record corresponding to a unique value in a field included in a table block or a list block. This is done by passing an argument to the detail block by means of a hyperlinked output field in the other block. To illustrate, let's consider the following example. Say we have a table block that displays customer orders, as in the example below:

In this table block, customers are identified by their ID number. We would like to create a hyperlink on each customer ID that links to another document showing the customer's information record. The other document would contain a detail block, and it might look like the example pictured at the beginning of this section.

To do this, we need to replace the Customer ID output field in our table block with a hyperlinked output field linking to the detail document. The hyperlink will contain an argument, or parameter, that contains the ID number of the customer whose ID the site visitor clicks. We also need to declare the argument in the detail block, so that it "knows" what to do with the argument when it receives it. Finally, we need to set up the where statement for the detail block to compare the value in the argument to the values in the Customers.ID database field that the detail block includes.

These are the steps we need to take:

  1. Delete the output field for customer IDs in the table block.
  2. Without moving the cursor, select the [Insert > Database > Output Field (Hyperlink)] command. The Output Field (Hyperlink) Properties dialog box appears.
  3. Click the [image] button next to the Database field text box and select <f,Orders.Customer>. (This is the name of our database field for customer IDs. The "f" indicates that what follows is a field name.) Doing this specifies that the hyperlinked output field should display the values in the Orders.Customer database field—that is, customer IDs—just as the ordinary output field that we deleted did.
  4. In the URL text box, enter the path to the document containing the detail block.
  5. Under Parameters, in the Name text box, enter the name of the argument that will be sent to the detail document when the hyperlinked output field is clicked. We can use any name we like (without spaces), since we haven't declared the parameter in the detail block yet. Let's call it customer_ID.
  6. Click the [image] button next to the Value text box and select <f,Orders.Customer> again. Doing this specifies that the value of the argument should be the customer ID that the site visitor clicks. For instance, if the visitor clicks customer ID 7, "7" is the value of the argument sent to the detail document.
  7. Click OK. Our new hyperlinked output field is inserted into the place where the ordinary output field used to be.
  8. Open or switch to the document containing the detail block (detail_customer.asp, in this example).
  9. Right-click anywhere in the detail block and select {Database > Document Properties...} in the shortcut menu. The Document Header Properties dialog box appears.
  10. Click the Parameters tab, and then click Add. A new argument will appear in the list, with the temporary name <New Arg>.
  11. Type the name of the argument that we specified in step 5, customer_ID and press <Enter>. The argument has now been declared.
  12. Click OK to close the dialog box.
  13. Right-click again anywhere in the block and select {Database > Block Properties...} in the shortcut menu. The Detail Block Properties dialog box appears.
  14. Click the Selection Statement tab.
  15. In the Where text box, type Customers.ID = <a,customer_ID>, or use the [image] button next to the text box to build the statement term by term. (The "a" indicates that what follows is an argument.) This tells the detail block to display the record whose value in the Customers.ID field matches the value of the customer_ID argument.
  16. Click OK to close the dialog box.
  17. Save the document.

To see if the hyperlinked output field works correctly, switch back to the table block document, switch to the Preview window, and click one of the hyperlinked output fields. If the detail document loads in the Preview window and displays the customer record matching the customer ID that was clicked, the hyperlinked output field works.

top


Entering a selection statement

Entering a "join" statement

Entering a "where" statement

Entering an "order" statement

Selection Statement is the fourth step of the Database Wizard for all block types except input blocks, to which it does not apply.

In this step, you enter a join statement if you selected fields from more than one table in the Database Fields step, and optionally enter where and order statements to specify which database records to display and the order in which to display them.

Entering a "join" statement

A join statement tells the document how fields from multiple tables are related to each other. A join statement is not necessary (nor is it possible) if the block includes fields from only one table. On the other hand, if the block includes fields from more than one table, a join statement is mandatory.

How you formulate the join statement depends on what information you wish to display in the block and which fields from different tables are related. The basic form of a join statement is as follows:

    table1.field1 = table2.field2

The basic idea is to state that a field in one table is related to a field in another table by putting an "=" sign between the two field names. If there are two or more such equations to make, you put the word "AND" between the equations.

To illustrate, let's continue the example given in the previous subsection. We wanted to set up a table block to show the records in our Orders database, which identifies customers by ID number. But we want customers' names, not ID numbers, to appear in the Customers column of the table block, so we added the fields Customers.ID and Customers.Name to the block, knowing that we could display customers' names by matching their ID numbers in Orders.Customer with their ID numbers in Customers.ID.

Here, then, is the join statement we need to use:

    Orders.Customer = Customers.ID

This tells the Database Wizard that we will pull records from the Customers table where the number in Customers.ID is the same as the number in Orders.Customer. If we were to leave out the join statement (if we could), the document would not know which records from the Customers table to display in the table block.

The [image] button next to the Join text box provides shortcuts for entering field names and logical operators. Instead of typing field names by hand, you can click the button and select a field from among the fields included in the block.

A join statement is not applicable to input or modification blocks, since these block types can only include fields from a single table.

Entering a "where" statement

A where statement is a conditional statement used to specify which record or records in a table are to be displayed in the block. This statement is optional for table, list, and chart blocks, but it is mandatory for detail and modification blocks, in which a single record must be selected. A where statement is not applicable to input blocks.

The basic form of a where statement is:

table1.field1 comparison_operator value|table2.field2

(The "|" between the last two terms indicates that either term, but not both, may be used.)

Some comparison operators are "=" (equals), "<>" (does not equal), "<" (is less than), ">" (is greater than), ">=" (is greater than or equal to), and "BETWEEN…AND". If you wish to make two or more comparisons, put "AND" between them if both conditions should be true, or "OR" if one or the other should be true.

Some examples of where statements are:

    Orders.Quantity > 10

    Orders.Quantity BETWEEN 10 AND 20

    Orders.Quantity > 10 AND Customers.Name = 'Trisha Long'

    Customers.ID = <a,customer_ID>

The last example compares the value in a field with the value of an argument passed to the document by a hyperlink (the "a" stands for "argument"). This type of where statement is used for a detail or modification block, in which you select the record to be displayed by clicking a hyperlinked output field in another document.

You can also make a statement using wildcard character "%".For example, if you want to find people, whose names begin with "Namo", from the 'employee' table, you can use the following statement.

    SELECT *
    FROM employee
    WHERE name LIKE 'Namo%'

See also Creating a detail block

The [image] button next to the Where text box provides shortcuts for entering field names and logical operators. Instead of typing field names by hand, you can click the button and select a field from among the fields included in the block.

Entering an "order" statement

An order statement is used to specify the sort order of the records displayed in a table or list block. Simply enter the name of a field in order to sort by that field. If you wish to sort the records using multiple sort keys, enter multiple field names separated by commas.

Two examples of order statements are:

    Orders.Date

    Orders.Date, Customers.Name

The first example sorts records by one field, Orders.Date. The second example sorts records by two fields—first by Orders.Date, and then by Customers.Name. Default order is descending. If you want to sort data in a descending order, select a field in Order text box and enter 'desc'.

The [image] button next to the Order text box provides shortcuts for entering field names. Instead of typing field names by hand, you can click the button and select a field from among the fields included in the block.

top


Modifying database-related properties

After completing the Database Wizard, if you are not satisfied with any of the choices you made in the wizard, you can modify them at any time in the Edit window.

You can modify any of the choices you made in the Database Wizard except the data source and the document type. If you need to change the data source selection, you must create a new block using the wizard.

Adding, removing, and editing parameters

To add, remove or edit a parameter used by the document, right-click a block and select {Database > Document Properties...} in the shortcut menu. In the Parameters tab, use the Add and Remove buttons to add and remove user parameters. You can change the name of a user parameter by double-clicking its name. You can change the data type or input method of a user parameter by Double-clicking its entry in the appropriate column and selecting from the drop-down menu.

Changing the list of included database fields

To add or remove database fields from the list of included database fields for a block, right-click the block, select {Database > Block Properties...} in the shortcut menu, and then click the Database Fields tab. (This tab is identical to the Database Wizard step of the same name.)

Changing the selection statement

To change the selection statement for a block, right-click the block, select {Database > Block Properties...} in the shortcut menu, and then click the Selection Statement tab. (This tab is identical to the Database Wizard step of the same name.)

Changing the input method or result URL for an input or modification block

To change the input method or result URL for an input or modification block, right-click the block, select {Database > Block Properties...} in the shortcut menu, and then click the Input Method tab.

Changing block element properties

To change the properties of any block element (such as an output field, an input field, or an input control), double-click the element.

top


Appearance of blocks in the Edit window

When you complete the Database Wizard, the new block is inserted into the active document in the Edit window at the location of the cursor. The picture below shows how a table block for a list of customer orders might appear in the Edit window, before any formatting:

The top row of the table contains database field names, which are static labels. The second row contains most of the active elements of the block: each cell contains an output field. The words "write value" serve as a placeholder for each output field.

Finally, the bottom row of the table contains the page link set, used to view additional pages of records.

The picture below shows a simple input block for inputting new customer orders, as it appears in the Edit window before any formatting.

In an input block, field names appear on the left side of a two-column table, and input fields and controls are on the right. There is one row per block element. In the particular input block above, the elements are a date input field, followed by two drop-down menus, and a number input field. Finally, at the bottom are a submit button (used by site visitors to submit the order) and a reset button (used to clear the order form).

The "write value", "write link" area will be highlighted in yellow, as in the example below.

Modifying the appearance of a block

Blocks may be rearranged and formatted, just like static page elements.

  • If you are not satisfied with the layout of the elements in a block, you can move the elements using drag-and-drop or copy-and-paste. (However, you must not move any element to a location outside the block.)
  • Output fields and hyperlinked output fields may be formatted in the same way as static text. You can change their font, text size, colors, and so forth. CSS-type styles may also be applied.
  • You can resize, merge, or split the cells of the table used to arrange the block elements. You can also resize the table itself, as well as change its borders, background color, and other appearance attributes.
  • The element labels the Database Wizard generates may be edited and formatted freely, or even deleted, since they are merely static text. You can also add more static text, or images, inside or outside the block.
  • You can modify the labels on the buttons in input and modification blocks. To change a button label, double-click the button and enter the new label in the Value text box.

top


Database Wizard - Document Type

[Database Wizard (all block types) - Step 1]
[Insert > Database > Document Properties... - Document Type tab]

In this step of the Database Wizard, you can specify the document type, the type of database connection, and the Web server operating system for a database-enabled document created using the Database Wizard.

Block type

The type of block used in the current document. This cannot be changed. If you need to use a different block type, create a new document and select the desired block type in the Database submenu of the Insert menu.

Script type

Choose the dynamic document standard you wish to use for the current document. The choices are ASP , PHP, and JSP.

  • ASP (Active Server Pages) is Microsoft's proprietary standard for creating dynamically updated Web documents. Microsoft's Web server programs, Internet Information Server (IIS) and Personal Web Server (PWS), have built-in support for ASP. On other platforms, ASP support is provided by third-party software such as Chili!Soft ASP.
  • PHP (PHP Hypertext Preprocessor) is an open source standard for creating dynamically updated Web documents. It is similar in function to ASP, but non-proprietary. PHP software may be freely downloaded from the PHP home page at http://www.php.net.
  • JSP (Java Server Pages) is very much like ASP except that the programming language is Java instead of VBScript or JavaScript. For more information about JSP, refer to http://java.sun.com/products/jsp.

Database

Specify the type of database that the current document will connect to. This actually determines how the document will connect to the database. The database types available in the menu depend on which script type is selected:

  • If the script type is ASP, the only available database type is ODBC. The document will use an ODBC connection to any database that supports ODBC.
  • If the script type is PHP, the available database types are ODBC and MySQL. Choose ODBC if you wish the document to use ODBC to connect to a database that supports it. Choose MySQL if the document will connect to a MySQL database and you wish to use a TCP/IP connection.
  • If the script type is JSP, the menu will list several database types (JDBC drivers). Select the type corresponding to your database. For example, if you are using an Oracle database, select Oracle. If your database type is not listed, select ODBC if you wish to use ODBC and the database supports it; otherwise, select User-defined. If you select User-defined, you will need to specify the driver to be used to connect to the database in the next step of the Database Wizard.

Server OS

Specify the operating system of the Web server that will serve the current document. If the document contains a chart block, this setting is used to determine the appropriate CGI program that will be uploaded to the server along with the document. If the document does not contain a chart block, this setting is ignored.

top


Database Wizard - Data Source (ASP)

[Database Wizards (all block types)- Step 2]
[Insert > Database > Block Properties... > Data Source tab]
If you specified ODBC as the database type in the first step of the Database Wizard, this dialog box is used to specify the desired ODBC data source (DSN).
  • Data source
    If you have already set up an ODBC DSN for your database, select it from the drop-down menu. Otherwise, select <Make New DSN> and follow the steps in the Create New Data Source dialog box to set up a new ODBC DSN.
  • User ID
    If the ODBC data source is password-protected, enter the user ID you use to access the database.
  • Password
    If the ODBC data source is password-protected, enter the password you use to access the database.

You can complete the Database Wizard even without supplying a user ID and password to your data source. However, if you do not supply a user ID and password, you will not be able to preview your database-enabled document in Namo WebEditor's Preview window.


Database Wizard - Data Source (JSP)

[Database Wizards (all block types)- Step 2]
[Insert > Database > Block Properties... > Data Source tab]

If you specified JSP as the script type in the first step of the Database Wizard, this dialog box is used to specify the data source URL and, optionally, a user-defined driver class. Namo WebEditor needs this information in order to set up the database-enabled document to connect to the database through JDBC (Java Database Connectivity).

Data source URL

Specifies the URL of the database. The form of the URL varies depending on the database type specified in the first step of the Database Wizard. If you specified any database type other than "User-defined", this field is initially filled in with a generic URL appropriate for the database type. Select the parts of the URL within brackets and enter the correct values for your database. (Make sure to delete the brackets.)

If you specified "User-defined" as the database type in the first step of the Database Wizard, the Data source URL field will be initially blank. Enter the URL for your database.

    Example:

    If you are connecting to a Microsoft SQL Server database, the generic URL has this form:

      jdbc:inetdae:[hostname]:[port]?database=[database]

    To complete the URL for a database named "MyDB" residing on server "www.namo.com" through port 1444, edit the URL to read:

      jdbc:inetdae:www.namo.com:1444?database=MyDB

Driver

If you specified any database type other than "User-defined" in the first step of the Database Wizard, this field displays the class name of the driver that will be used to connect to the data source. The class name cannot be edited.

If you specified "User-defined" as the database type, enter the class name of the driver to use to connect to the database.

You can search for JDBC drivers compatible with your database type by visiting Sun Microsystem's JDBC driver search page at http://industry.java.sun.com/products/jdbc/drivers.

  • User ID
    Enter the user ID you use to access the database.
  • Password
    Enter the password you use to access the database.

You can complete the Database Wizard even without supplying a user ID and password to your data source. However, if you do not supply a user ID and password, you will not be able to preview your database-enabled document in Namo WebEditor's Preview window.

ODBC DSN for preview

Even if you use JDBC to connect to your database, you must also specify an ODBC DSN (Data Source Name) to the same database. This is because Namo WebEditor always uses ODBC internally to discover the names and types of the fields in the database, for use in later steps of the Database Wizard as well as database-related dialog boxes.

If you have already set up an ODBC DSN for your database, select it from the drop-down menu. Otherwise, select <Make New DSN> and follow the steps in the Create New Data Source dialog box to set up a new ODBC DSN.

Once you complete the Database Wizard, the ODBC DSN for preview cannot be changed.

See also

top


Database Wizard - Data Source (PHP+MySQL)

[Database Wizards (all block types)- Step 2]
[Insert > Database > Block Properties... > Data Source tab]

If you specified PHP as the script type and MySQL as the database type in the first step of the Database Wizard, this dialog box is used to specify the MySQL host name or IP address and the database name. Namo WebEditor needs this information in order to set up the database-enabled document to connect to the MySQL database through TCP/IP.

  • MySQL host
    Enter the host name or IP address and port number where the MySQL database resides.

    Example:

    If the host name of the server hosting the database is "mysql.namo.com" and the port number is 3306, you would enter:

      mysql.namo.com:3306

  • MySQL DB name
    Enter the name of the MySQL database.
  • User ID
    Enter the user ID you use to access the database.
  • Password
    Enter the password you use to access the database.

    • You can complete the Database Wizard even without supplying a user ID and password to your data source. However, if you do not supply a user ID and password, you will not be able to preview your database-enabled document in Namo WebEditor's Preview window.

  • ODBC DSN for preview
    Even if you use JDBC to connect to your database, you must also specify an ODBC DSN (Data Source Name) to the same database. This is because Namo WebEditor always uses ODBC internally to discover the names and types of the fields in the database, for use in later steps of the Database Wizard as well as database-related dialog boxes.
    If you have already set up an ODBC DSN for your database, select it from the drop-down menu. Otherwise, select <Make New DSN> and follow the steps in the Create New Data Source dialog box to set up a new ODBC DSN.

    • If you are unable to log in to your database, make sure the appropriate ODBC driver is installed on your computer and that the database connection setup information has been properly specified in the ODBC Data Source Administrator dialog box.

See also

top


Database Wizard - Database Fields

[Database Wizard (all block types) - Step 3]
[Insert > Database > Block Properties... - Database Fields tab]

In this step of the Database Wizard, you select the fields from the tables in your database to use in the current block.

Available fields list

The hierarchical list on the left side of the dialog box shows all the tables in the selected database. To see the fields in a table, click the plus sign next to the table name.

Included fields list

The multi-column list on the right side of the dialog box shows the fields that you have selected for inclusion in the block.

Buttons

  • Add...
    Click to add the selected field in the available fields list to the included fields list.
  • Remove
    Click to remove the selected field in the included fields list.
  • Remove All
    Click to remove the contents of the included fields list.
  • Up
    Click to move the selected field in the included fields list up.
  • Down
    Click to move the selected field in the included fields list down.


Database Wizard - Block Elements

[Database Wizard (Input Block) - Step 4]
[Database Wizard (Modification Block) - Step 5]
[Database Wizard (Table Block) - Step 5]
[Database Wizard (List Block) - Step 5]
[Database Wizard (Detail Block) - Step 5]

In this step of the Database Wizard, you select the fields that will be displayed in an input, modification, table, list, or detail block.

In the previous step of the Database Wizard, you selected the database fields that would be used by the block that you are creating. In this step, you decide which of the selected database fields will actually be displayed in the block, and in what order. If you wish, you can specify that some database fields should not be displayed in the block, or that other database fields should be displayed more than once. Also, you may wish to set up the order of the fields in the block differently from the order of the fields in the database.

  • Block element list
    The list shows the block elements that are currently set up. Block elements include not just fields, but also drop-down menus, radio button groups, and links that are used to show additional records. Initially, the items in this list include each database field that you selected in the previous step of the wizard, plus a page link element if the block type is table or list. The Element type column shows the type of each block element that is currently set up. The Element column shows the name of each block element. You can double-click an item in the list to view the properties of that element.
  • Add... button
    Click to add an element to the block. A pop-up menu will appear, displaying the available element types. What types are available depends on the type of block you are creating (see table below). When you select an element type to add, a dialog box will open in which you specify the properties of the element.
    • Block element type | Application block types | Element properties
Number input field | Input, modification | DB field name, default value, width, max input length
String input field | Input, modification | DB field name, default value, width, max input length
Text input field | Input, modification | DB field name, default value, width, number of lines
Date input field | Input, modification | DB field name, default value, date format
Hidden input field | Input, modification | DB field name, default value
Drop-down menu | Input, modification | DB name, menu items source field, item values source field, default value
Radio button group | Input, modification | DB field name, button labels source field, button values source field, default value
Output field | All block types | DB field name
Output field (hyperlink) | All block types | DB field name, target URL, send parameters

    When you add a drop-down menu or a radio button group, the Drop-Down Menu Wizard or the Radio Button Wizard appears so that you can select the data source and source fields for the menu or button group.

  • Remove button
    Click to remove the selected block element.
  • Up button
    Click to move the selected element up. It will occupy a higher row in the finished block. (In a table block, the element will be moved to the left.)
  • Down button
    Click to move the selected element down. It will occupy a lower row in the finished block. (In a table block, the element will be moved to the right.)

Page link elements cannot be moved up or down. They always appear at the bottom of the block.

top


Database Wizard - Selection Statement

[Database Wizard (Modification Block) - Step 4]
[Database Wizard (Table Block) - Step 4]
[Database Wizard (List Block) - Step 4]
[Database Wizard (Detail Block) - Step 4]
[Database Wizard (Chart Block) - Step 4]
[Insert > Database > Block Properties... - Selection Statement tab]

This step of the Database Wizard lets you enter a SQL statement to select the records that will be displayed in the current block, and to determine their sort order.

  • Join
    If you selected fields from two or more database tables in the Database Fields step of the Database Wizard, you must enter a statement that will determine how to relate the tables. Usually, this statement equates a field in each table with a field in every other table, so that information about corresponding records in all the tables can be displayed together. In order for two or more tables to be joined, an equivalent field must exist in each table. Use the drop-down menu to quickly enter field names and operators.

    Example:
    Say you have one table (Employees) that has an ID field and a Names field, and another table (Salaries) that has an ID field and a Salary field. If you want to show employee names and salaries together in one view, you would select all the fields in both tables in the Database Fields step of the Database Wizard, then enter

    Employees.ID = Salaries.ID

    in the Join text box.

    If you selected fields from only one table in the Database Fields step of the Database Wizard, the Join input box will be disabled, since there is no need to join multiple tables.
  • Where
    Enter a statement that will determine which records will be shown. Use the drop-down menu to quickly enter field names and operators. Leave this text box blank to show all records.

    Examples:
    Employee.Salary > 45000
    Employee.Salary > 45000 AND Employee.Age < 30
    Employee.Salary NOT BETWEEN 45000 AND 60000
  • Order
    Enter one or more field names to determine how the records will be sorted when displayed. Use the drop-down menu to quickly enter field names. To use a single sort key, simply enter one field name. To use multiple sort keys, enter multiple field names separated by commas. To sort a field in reverse order, enter "desc" after the field name.

    Example:
    Employee.Salary desc, Employee.Age

top


Database Wizard - Input Method

[Database Wizard (Input Block) - Step 5]
[Database Wizard (Modification Block) - Step 6]
[Insert > Database > Block Properties... - Input Method tab]

In this step of the Database Wizard, you can select an input method for sending the data in an input or modification block to the Web server.

  • Input method
    Select GET or POST. POST is the recommended method when adding or modifying information in a database. GET may also be used, but this method limits the length of the sent data to 255 characters. Select POST--which has no such limitation--unless you have a specific reason to select GET.
  • Result URL
    If you wish, you can enter the path or URL to a document that will be shown when the site visitor submits the form. Click Browse... to locate and select a document on your hard drive. If you leave this blank, the generic message "Input process is complete" will be shown.


Table Settings

[Database Wizard (Table Block) - Step 6]
[Insert > Database > Block Properties... - Table Settings tab]

You can set the maximum number of records per page for a table block.

  • Number of rows
    Specify the maximum number of rows (records) that will be displayed on one page. If the database has more than this number of records, the table will continue on successive pages, which may be viewed using the page links at the bottom of the block.


List Settings

[Database Wizard (List Block) - Step 6]
[Insert > Database > Block Properties... - List Settings tab]

In this step of the Database Wizard, you can set the maximum number of records per page for a list block.

  • Number of rows
    Specify the maximum number of rows (records) that will be displayed on one page. If the database has more than this number of records, the list will continue on successive pages, which may be viewed using the page links at the bottom of the block.


Chart Settings

[Database Wizard (Chart Block) - Step 5]
[Insert > Database > Block Properties... - Chart Block Settings tab]

Series and Categories

Source fields

CGI path

In this step of the Database Wizard for chart blocks, you specify the source fields for the chart block's series, categories, and values.

When you use the Database Wizard to create a chart block, you must tell the wizard where to get the series, categories, and values that will be in the chart. Values always come from the database. Series and categories can either come from the database or be entered manually once you have completed all the steps in the wizard.

Series and Categories

  • Source
    • Enter manually - Select this option if you intend to enter the series and category names manually after finishing the Database Wizard. Use this option if your database table contains only values, or if you only wish to use the values in the table without using the other fields. Once you complete the Database Wizard, double-click the chart and enter the series names in the Series tab of the Chart Block Properties dialog box, then enter the category names in the Values tab of the dialog box using the table cells under X-axis.
    • Retrieve from database - Select this option to use database fields as the source of the series and categories. Under Source fields, select the source fields for the series names and category names.

      In order use the database as the source of series and categories, the database table must be structured appropriately. Each record (row) in the table must have a series name, a category name, and a value. Additionally, each record must have a unique identifier in another field (column), since many records can have the same series name and/or category name. In the example table below, series names will be obtained from the Product field, category names from the Country field, and values from the Units_Sold field.
      • Rec_ID | Country | Product | Units_Sold
1 | Japan | Widget | 500
2 | Japan | Gewgaw | 275
3 | Italy | Widget | 330
4 | Italy | Gewgaw | 300
5 | Brazil | Widget | 410
6 | Brazil | Gewgaw | 170

      Here is an example chart form produced using the database table above:

  • Number of categories
    If you selected Enter manually under Source, enter the number of categories that the chart will have. After finishing the Database Wizard, you must enter this many category names in the Values tab of the Chart Block Properties dialog box using the table cells under X-axis.
  • Number of series
    If you selected Enter manually under Source, enter the number of series that the chart will have. After finishing the Database Wizard, you must enter this many series names in the Series tab of the Chart Block Properties dialog box.

Source fields

  • Series names
    Select the database field that will serve as the source of series names in the chart. The drop-down menu lists all the fields that you selected in the previous step of the Database Wizard.
  • Category names
    Select the database field that will serve as the source of category names in the chart. The drop-down menu lists all the fields that you selected in the previous step of the Database Wizard.
  • Values
    Select the database field that will serve as the source of the values in the chart. The drop-down menu lists all the fields that you selected in the previous step of the Database Wizard.

CGI path

In order for your site visitors to be able to view your database-driven chart, a CGI program on the Web server must generate the chart and pass it to the Web server software. By default, Namo WebEditor saves the CGI program in the same folder as the document containing the chart form. When you upload the document to your Web site, you must also upload the CGI program to the same folder on the Web server.

However, you may wish to move the CGI program to a different folder, such as 'cgi-bin'. If you do this, you must also specify the path to the CGI program in CGI path. For example, if you decide to store the CGI program in a 'cgi-bin' folder at the top level of your Web site, you should enter 'cgi-bin/[CGI program name]' in the CGI path text box. The filename of the CGI program that generates the chart depends on which Web server operating system you selected in the first step of the Database Wizard. Refer to the table below to determine the CGI program filename for your selected operating system.

Web server OS | CGI program filename
Windows | wed_chart_windows.cgi
Linux | wed_chart_linux.cgi
Solaris | wed_chart_solaris.cgi
Solaris x86 | wed_chart_solaris_x86.cgi
FreeBSD | wed_chart_freebsd.cgi

Whichever folder on your Web site you put the CGI program in, the folder must have read and execute permissions enabled in order for the CGI program to run. If you're not sure how to set folder permissions, refer to your Web server software documentation or ask your network administrator.

top


Output Field Settings

[Insert > Database > Output Field... - Output Field Settings tab]
[Insert > Database > Element Properties... - Output Field Settings tab]

You can add or configure an output field in a table block, list block, or detail block in a database-enabled document.

Database field

Using the drop-down menu, select the database field to be mapped to this output field. For each record, the contents of the selected database field will be shown in this output field. All the database fields that you selected in the Database Fields step of the Database Wizard are available.


Output Field (Hyperlink) Settings

[Insert > Database > Output Field (Hyperlink)... - Output Field (Hyperlink) Settings tab]
[Insert > Database > Element Properties... - Output Field (Hyperlink) Settings tab]

This tab lets you add or configure a hyperlinked output field in a table block, list block, or detail block in a database-enabled document.

What is a hyperlinked output field?

A hyperlinked output field is an output field that not only displays the contents of a database field, but also acts as a link to another document. Most usefully, it can link to another database-enabled document, for instance to display more information about a particular database record.

Database field

Using the drop-down menu, select the database field to be mapped to this output field. For each record, the contents of the selected database field will be shown in this output field. All the database fields that you selected in the Database Fields step of the Database Wizard are available.

Target URL

Enter the path or URL to the target document of the hyperlink. You can type this in, or click Browse... to locate and select a document on your hard drive.

Parameters

This list box displays the parameters that will be sent to the target document. Click Add... to add a parameter; the Add/Modify Parameters dialog box will appear.

For example, if the target document contains a detail block, you should add a parameter supplying a unique value identifying the record to be displayed in the detail block (usually the record's ID number).

To modify a parameter you've already entered, select the parameter in the list box and click Modify.... To remove it, select it and click Remove.

If the target document is another database-enabled document, you must add a matching parameter to the target document so that it "knows" how to handle the parameter sent by the current document. To add the matching parameter to the target document, follow the steps below.

  1. Open the document.
  2. Select the [Insert > Database > Document Properties...] menu command.
  3. In the Document Header Properties dialog box, switch to the Parameters tab.
  4. Click Add.... Type the name of the parameter exactly as it appears in the Parameters list box of the hyperlinked output field, and press <Enter>.
  5. Double-click the Data type of the new parameter. In the drop-down menu, select the data type of the database field whose value will be supplied by the parameter.
  6. Click OK to close the Document Header Properties dialog box.

top


Adding/Modifying parameters

[Insert > Database > Output Field (Hyperlink)... - Output Field (Hyperlink) Settings tab - Add... button]
[Insert > Database > Element Properties... - Output Field (Hyperlink) Settings tab - Add... button]

You can specify the name and value of a parameter used in a hyperlinked output field.

Name

Enter the name of the parameter. The name can be anything you like, as long as it does not contain spaces or other punctuation except for hyphens and underscores.

Value

Enter the value of the parameter. If you are using the hyperlinked output field to link to another database-enabled document, select a database field in the drop-down menu. All the database fields that you selected in the Database Fields step of the Database Wizard will be available in the menu. It is also possible to enter a static value.


Text Input Field Settings

[Insert > Database > Insert Text Input Field...]

This dialog box lets you add or configure a text input field in an input block or a modification block.

  • Target field
    Select the database field corresponding to the text input field. The drop-down menu lists all the eligible fields among those you selected in the Database Fields step of the Database Wizard. Only fields that have the text data type or the string data type are eligible.

    Although it is possible to type a field name into the text box, do not enter the name of a non-text field. If you do so, the input form will not work.

  • Default value
    If desired, enter a default value for the text input field.

    If the text input field is in an input block, you can select a parameter that will supply the default value. Click the [image] button to select a parameter from among the parameters that have been defined in Parameters tab of the Document Header Properties dialog box.

    If the text input field is in a modification block, the default value can be supplied from a text-format database field among the fields you selected in the Database Fields step of the Database Wizard. The value contained in that field for the selected record will be used as the default value of the text input field when the document is displayed in a browser. Click the [image] button to select a database field.

  • Number of lines
    Specify the height of the text input field, in number of lines.
  • Width in characters
    Specify the width of the input field, in characters.

What's the difference between a text input field and a string input field?

Both text input fields and string input fields accept the same kind of data--any letter, number, punctuation or other kind of character that you can see on screen or type on a keyboard. The difference is that text input fields also accept carriage returns (line breaks), while string input fields do not. Text input fields can accept several lines of text, while string input fields can accept only a single unbroken line of characters. As a consequence, a string input field can be mapped to a text field in the database, but a text input field cannot be mapped to a string field.

In Microsoft Access terminology, a string field is called a "text" field, while a text field is called a "memo" field.

top


String Input Field Settings

[Insert > Database > Insert String Input Field...]

This dialog box lets you add or configure a string input field in an input block or a modification block.

  • Target field
    Select the database field corresponding to the string input field. The drop-down menu lists all the eligible fields among those you selected in the Database Fields step of the Database Wizard. Only fields that have the string data type are eligible.

    Although it is possible to type a field name into the text box, do not enter the name of a non-string field. If you do so, the input form will not work.

  • Default value
    If desired, enter a default value for the string input field.

    If the string input field is in an input block, you can select a parameter that will supply the default value. Click the [image] button to select a parameter from among the parameters that have been defined in Parameters tab of the Document Header Properties dialog box.

    If the string input field is in a modification block, the default value can be supplied from a string-format database field among the fields you selected in the Database Fields step of the Database Wizard. The value contained in that field for the selected record will be used as the default value of the string input field when the document is displayed in a browser. Click the [image] button to select a database field.

  • Width in characters
    Specify the width of the input field, in characters.
  • Maximum input length
    Specify the maximum number of characters that the field will accept.

What's the difference between a string input field and a text input field?

Both text input fields and string input fields accept the same kind of data--any letter, number, punctuation or other kind of character that you can see on screen or type on a keyboard. The difference is that text input fields also accept carriage returns (line breaks), while string input fields do not. Text input fields can accept several lines of text, while string input fields can accept only a single unbroken line of characters. As a consequence, a string input field can be mapped to a text field in the database, but a text input field cannot be mapped to a string field.

In Microsoft Access terminology, a string field is called a "text" field, while a text field is called a "memo" field.

top


Number Input Field Settings

[Insert > Database > Insert Number Input Field...]

This dialog box lets you add or configure a number (integer) input field in an input block or a modification block.

  • Target field
    Select the database field corresponding to the number input field. The drop-down menu lists all the eligible fields among those you selected in the Database Fields step of the Database Wizard. Only fields that have the integer data type are eligible.

    Although it is possible to type a field name into the text box, do not enter the name of a non-number field. If you do so, the input form will not work.

  • Default value
    If desired, enter a default value for the number input field.

    If the number input field is in an input block, you can select a parameter that will supply the default value. Click the [image] button to select a parameter from among the parameters that have been defined in Parameters tab of the Document Header Properties dialog box.

    If the number input field is in a modification block, the default value can be supplied from an integer-format database field among the fields you selected in the Database Fields step of the Database Wizard. The value contained in that field for the selected record will be used as the default value of the number input field when the document is displayed in a browser. Click the [image] button to select a database field.

  • Width in characters
    Specify the width of the input field, in characters.
  • Maximum input length
    Specify the maximum number of digits that the field will accept.


Page Link Settings

[Insert > Database > Page Link Properties...]

Lets you specify the number of page links to display at the bottom of a table block or a list block in a database-enabled document.

If you are using a table block or a list block, and your database has more records (or your query returns more records) than can be shown on a single page, page links will be inserted at the bottom of the block to let your site visitors view additional pages of records. You can specify the maximum number of page links that will be inserted.

The maximum number of records to display on a page is specified in the Table Settings tab of the Table Block Properties dialog box or the List Settings tab of the List Block Properties dialog box.

  • Number of page links
    Specify the maximum number of page links to display at the bottom of the current table block or list block. This is actually the maximum number of links to insert between the first page link and the last page link, which are always shown. If you enter a value of zero, only the first page link and the last page link will be shown, with no in-between page links. The maximum value is 100; if you enter more than 100, only 100 maximum in-between links will be shown.


Date Input Field Settings

[Insert > Database > Insert Date Input Field...]

This dialog box is used to add or configure a date/time input field in an input block or a modification block.
  • Database field
    Select the database field corresponding to the date input field. The drop-down menu lists all the eligible fields among those you selected in the Database Fields step of the Database Wizard. Only fields that have the date data type are eligible.

    Although it is possible to type a field name into the text box, do not enter the name of a non-date field. If you do so, the input form will not work.

  • Default value
    If the date input field is in a modification block, you can specify a default value for the field to be supplied from an date-format database field among the fields you selected in the Database Fields step of the Database Wizard. The value contained in that field for the selected record will be used as the default value of the date input field when the document is displayed in a browser. Click the [image] button to select a database field.
  • Date format
    Specify the date/time format. Use "yy" for the year, "mm" for the month, "dd" for the day, "hh" for the hour, and "mi" for the minute. Use the drop-down menu to select from several common formats. After selecting a format in the menu, you can edit it in the text box. If you don't want to include the time, remove "hh:mi". If you set the date format to "hh:mi", the current date will still be sent to the server.

    Example date formats:

    mm/dd/yy hh:mi
    yy-mm-dd


Hidden Field Settings

[Insert > Database > Hidden Field...]

This dialog box lets you add or configure a hidden field in an input or modification block.

A hidden field is used to send a value to the server when a site visitor submits an input or modification form, without allowing the user to modify the value. This is useful, for instance, when you need to submit a primary key (such as an ID number) along with the information in the form, but you don't want your site visitors to be able to modify the primary key.

  • Target field
    Select the database field that will receive the value in the hidden field.
  • Default value
    Enter a value for the hidden field. If the hidden field is in a modification block, the value can be supplied from a database field among the fields you selected in the Database Fields step of the Database Wizard. The value contained in that field for the selected record will be used as the value of the hidden field when the document is displayed in a browser. Click the [image] button to select a database field.


Target and Source Fields for Drop-Down Menu

[Insert > Database > Drop-Down Menu... > Drop-Down Menu Wizard, Step 4]
[Insert > Database > Element Properties... - Target and Source Fields tab]

Lets you specify the target field and source fields for a drop-down menu in an input or modification block.

  • Target field
    Select the database field to use as the target of the menu selection.
  • Menu items source field
    Select the database field that will supply the items in the menu. This field determines what appears in the menu, but the actual value sent to the Web server depends on the item values source field, which may or may not be the same as the menu items source field.
  • Item values source field
    Select the database field that will supply the values corresponding to each item in the menu. The value corresponding to the selected menu item--not the item itself--will be sent to the Web server.
  • Default value
    If desired, specify the default value for the drop-down menu. The default value should be equal to one of the possible values for the target field.

    If the drop-down menu is in a modification block, you can either enter a static value into the text box or select a database field to supply the default value by clicking the [image] button. You should specify the same database field that you specified for the target field. This way, the default selection of the drop-down menu will be the one corresponding to the existing value in the selected record when the document is viewed in a browser.

    If the drop-down menu is in an input block, you can enter either a static value or the name of a parameter that will supply the default value. Click the [image] button to select a parameter from among the parameters that have been defined in Parameters tab of the Document Header Properties dialog box.

top


Target and Source Fields for Radio Button Group

[Insert > Database > Radio Button Group... > Radio Button Wizard, Step 5]
[Insert > Database > Element Properties... - Target and Source Fields tab]

Lets you specify the target field and source fields for a radio button group in an input or modification block.

  • Target field
    Select the database field to use as the target of the radio button selection.
  • Button labels source field
    Select the database field that will supply the labels of the radio buttons. The actual value sent to the Web server is determined by the button values source field (see below), which may or may not be the same as the labels source field.
  • Button values source field
    Select the database field that will supply the values corresponding to each radio button. The value corresponding to the selected radio button--not the button label--will be sent to the Web server.
  • Default value
    If desired, specify the default value for the radio button group. The default value should be equal to one of the possible values for the target field.

    If the radio button group is in a modification block, you can either enter a static value into the text box or select a database field to supply the default value by clicking the [image] button. You should specify the same database field that you specified for the target field. This way, the default selection of the radio button group will be the one corresponding to the existing value in the selected record when the document is viewed in a browser.

    If the radio button group is in an input block, you can enter either a static value or the name of a parameter that will supply the default value. Click the [image] button to select a parameter from among the parameters that have been defined in Parameters tab of the Document Header Properties dialog box.


Source Information

[Insert > Database > Document Properties... - Source Information tab]
[Insert > Database > Block Properties... - Source Information tab]
[Insert > Database > Element Properties... - Source Information tab]

Displays information about the section of the document's source code associated with the current block or block element in a database-enabled document, or the document itself.

Each block and block element in a database-enabled document, as well as the document itself, has an associated section in the source code of the document that describes the function of the block, block element, or document, and stores its associated parameters.

The Source Information tab allows you to view or change the name of the associated section in the document source, and to see whether the section has been modified.

  • Source name
    The name of the source section associated with the document as a whole. You can change the name, but in general there should be no reason to do so.
  • Modification status
    Shows whether the source section has been modified in HTML editing mode or by another program.


Document Header Properties dialog box

[Insert > Database > Document Properties...]

Source Information tab

Document Type tab

Parameters tab

This dialog box lets you view or modify the global database-related properties stored in the header of the current database-enabled document.

Source Information tab

Each block and block element in a database-enabled document, as well as the document itself, has an associated section in the source code of the document that describes the function of the block, block element, or document, and stores its associated parameters.

The Source Information tab allows you to view or change the name of the associated section in the document source, and to see whether the section has been modified.

  • Source name
    The name of the source section associated with the document as a whole. You can change the name, but in general there should be no reason to do so.
  • Modification status
    Shows whether the source section has been modified in HTML editing mode or by another program.

Document Type tab

This tab displays the type of block contained in the current document and the choices you made in the first step of the Database Wizard for this document. You can modify most of those choices here.

  • Block type
    The type of block used in the current document. This cannot be changed. If you need to use a different block type, create a new document and select the desired block type in the Database submenu of the Insert menu.
  • Script type
    The dynamic Web document standard used by the current document. This can be either ASP , PHP, or JSP.

    • ASP (Active Server Pages) is Microsoft's proprietary standard for creating dynamically updated Web documents. Microsoft's Web server programs, Internet Information Server (IIS) and Personal Web Server (PWS), have built-in support for ASP. On other platforms, ASP support is provided by third-party software such as Chili!Soft ASP. PHP (PHP Hypertext Preprocessor) is an open source standard for creating dynamically updated Web documents. It is similar in function to ASP, but non-proprietary. PHP software may be freely downloaded from the PHP home page. JSP (Java Server Pages) is very much like ASP except that the programming language is Java.

  • Database
    The type of database that the current document will connect to. This actually determines how the document will connect to the database. The database types available in the menu depend on which script type is selected:
    • If the script type is ASP, the only available database type is ODBC. The document will use an ODBC connection to any database that supports ODBC.
    • If the script type is PHP, the available database types are ODBC and MySQL. Choose ODBC if you wish the document to use ODBC to connect to a database that supports it. Choose MySQL if the document will connect to a MySQL database and you wish to use a TCP/IP connection.
    • If the script type is JSP, the menu will list several database types in addition to ODBC. Select the type corresponding to your database. For example, if you are using an Oracle database, select Oracle. If your database type is not listed, select ODBC if you wish to use ODBC and the database supports it; otherwise, select User-defined. If you select User-defined, you will need to specify the driver to be used to connect to the database in the Data Source tab of the Block Properties dialog box.
  • Server OS
    The operating system of the Web server that will serve the current document. If the document contains a chart block, this setting is used to determine the appropriate CGI program that will be uploaded to the server along with the document. If the document does not contain a chart block, this setting is ignored.

Parameters tab

This tab lists the parameters used by the current document. Parameters are sent to the Web server whenever a site visitor viewing a database-enabled document clicks a button to submit a form or clicks a link to view more records.

Normally, you should not have to modify the parameter list. However, if you inserted a hyperlinked output field into a document that you created using the Database Wizard, and the target of the hyperlink is also a document that you created using the Database Wizard, then you must add a parameter to the target document whose name is the same as the parameter name you entered in the Output Field (Hyperlink) Properties dialog box and whose data type is the same as the data type of the hyperlinked output field.

  • Argument name
    Shows the name of each database-related parameter used by the document. You can rename a parameter that you added after double-clicking the name.

    • Do not rename any parameter that was automatically generated by the Database Wizard (those of type Field or Document).

  • Data type
    Shows the data type of each parameter. You can change the data type of a parameter that you added by double-clicking the data type and selecting a new one from the drop-down menu.

    • Do not change the data type of any parameter that was automatically generated by the Database Wizard (those of type Field or Document).

  • Argument type
    Shows the argument type of each parameter. There are three argument types: Field, Document, and User. The first two types are generated by the Database Wizard. The User type is for parameters that you add. The argument type cannot be changed.
  • Input method
    Shows the method used to send the parameter to the Web server. There are two methods: GET and POST. If the current document contains an input or modification block, the parameters that were generated by the Database Wizard use the input method you specified in the Select Input Method step of the wizard. If necessary, you can change the input method by double-clicking the method and selecting GET or POST in the drop-down menu.
  • Add... button
    Click to add a parameter. A new parameter will appear in the list, with "<New Arg>" as the name. Type the name you want to use and press <Enter>. Then select the data type and input method.

    • If the current document is the target of a hyperlinked output field in another document, you must add a parameter to the current document whose name is the same as the parameter name you entered in the Output Field (Hyperlink) Properties dialog box in the other document and whose data type is the same as the data type of the hyperlinked output field.

  • Remove button
    Click to remove a parameter that you added, if you no longer need it. Parameters that were generated by the Database Wizard cannot be removed.

top


Document Header Properties dialog box - Parameters tab

[Insert > Database > Document Properties... - Parameters tab]
This tab is used to view, add, remove, or modify the parameters used by the current database-enabled document.

This tab lists the parameters used by the current document. Parameters are sent to the Web server whenever a site visitor viewing a database-enabled document clicks a button to submit a form or clicks a link to view more records.

Normally, you should not have to modify the parameter list. However, if you inserted a hyperlinked output field into a document that you created using the Database Wizard, and the target of the hyperlink is also a document that you created using the Database Wizard, then you must add a parameter to the target document whose name is the same as the parameter name you entered in the Output Field (Hyperlink) Properties dialog box and whose data type is the same as the data type of the hyperlinked output field.

  • Argument name
    Shows the name of each database-related parameter used by the document. You can rename a parameter that you added after double-clicking the name.

    Do not rename any parameter that was automatically generated by the Database Wizard (those of type Field or Document).

  • Data Type
    Shows the data type of each parameter. You can change the data type of a parameter that you added by double-clicking the data type and selecting a new one from the drop-down menu.

    Do not change the data type of any parameter that was automatically generated by the Database Wizard (those of type Field or Document).

  • Argument Type
    Shows the argument type of each parameter. There are three argument types: Field, Document, and User. The first two types are generated by the Database Wizard. The User type is for parameters that you add. The argument type cannot be changed.
  • Method
    Shows the method used to send the parameter to the Web server. There are two methods: GET and POST. If the current document contains an input or modification block, the parameters that were generated by the Database Wizard use the input method you specified in the Select Input Method step of the wizard. If necessary, you can change the input method by double-clicking the method and selecting GET or POST in the drop-down menu.
  • Add... button
    Click to add a parameter. A new parameter will appear in the list, with "<New Arg>" as the name. Type the name you want to use and press <Enter>. Then select the data type and input method.

    If the current document is the target of a hyperlinked output field in another document, you must add a parameter to the current document whose name is the same as the parameter name you entered in the Output Field (Hyperlink) Properties dialog box in the other document and whose data type is the same as the data type of the hyperlinked output field.

  • Remove button
    Click to remove a parameter that you added, if you no longer need it. Parameters that were generated by the Database Wizard cannot be removed.

top


What are charts?

What are charts?

Charts are a way to present tabular information--which may be difficult to grasp--in easy-to-understand visual form. By using lines, bars, columns, and other shapes (usually on a grid) to represent data values, charts simplify the presentation of complex data. They let you turn unintelligible tables into meaningful, impactful pictures. Traditionally, charts have been used in spreadsheets, slide presentations, and printed documents; but the explosion of the Web has created new applications for charts. Any time you have a table in your Web site that contains quantitative (numerical) data, you can use Namo WebEditor's Chart Wizard to turn the table into a colorful chart in just a few steps. The chart is inserted into the document as a standard GIF image, but you can edit its properties (data values, chart type, colors, etc.) of the chart at any time, and Namo WebEditor will automatically generate a new GIF image for it. Once you create a chart, it is no longer dependent on the table that provides the values for it. Even deleting the table will leave the chart unchanged.


What is the Chart Wizard?

What is the Chart Wizard?

Namo WebEditor's Chart Wizard guides you through three simple steps to create a chart from the information in a table. To use the Chart Wizard, click anywhere inside a table containing quantitative data and use the [Insert > Other > Chart...] menu command.

Before using the Chart Wizard, you should be familiar with two basic concepts of charts and graphs: data series and categories. Every chart or graph has at least one data series--a series of values that changes over time or as some other variable changes. Whereas each category contains one value from each data series. Values to be compared are grouped into categories, and each category contains one value from each data series.

What is the Chart Properties dialog box?

This dialog box gives you complete control over the settings, formatting, and options of a chart created using the Chart Wizard. To access the Chart Properties dialog box, double-click a chart.

If the Chart Properties dialog box looks strange on your monitor, please make sure you have the latest version of your video driver installed in your system.


Starting the Chart Wizard

Before starting the Chart Wizard, decide whether you wish to create a chart using all of the cells in a table or only some of the cells. If you wish to use an entire table, place the cursor anywhere inside the table. If you wish to use just some of the cells, select them by dragging the mouse button. Then, select the [Insert > Other > Chart...] menu command to start the Chart Wizard. Once you have completed the wizard, the chart will be inserted just below the table.


Selecting a chart type (Step 1)

  1. Select a basic chart or graph type using the buttons at the top of the dialog box. The basic chart types are: column, bar, line, scatter, pie, doughnut, stacked area, and radar.
  2. Select a chart or graph subtype using the large icons in the selection box. When you click a subtype icon, a description appears below the selection box.
  3. Under 3D effect, select Use 3D effect if you want the chart to use a 3D effect. (This option is not available for line, scatter, stacked area, or radar charts.) If you select Use 3D effect, also specify the depth of the 3D effect and the perspective angle.

  4. Click Next to continue to the next step of the wizard.

Using 3D effect may make it somewhat difficult to read a chart accurately. In general, you should use a 3D effect only when you wish to communicate the relative sizes of values, rather than precise values.


Specifying series and categories (Step 2)

In the second step of the Chart Wizard, you will tell the wizard how to "read" the table to create the chart you want. Although the wizard makes intelligent guesses to read the table, sometimes the guesses are wrong. This step gives you a chance to correct guesses the wizard makes.

  1. The wizard assumes that each column in the table contains a data series and that each row contains a category. If your table is arranged the other way around, then select Swap X/Y axis. Selecting this option does not actually transpose the rows and columns in your table. It transposes the rows and columns in the Chart Wizard's internal representation of the table, which is displayed in the Data preview in the top right corner of the dialog box.
  2. Based on the contents of your table, the wizard tries to guess whether the first row contains series names or values. The wizard automatically selects or deselects the First row contains series names option, depending on its guess. You can manually decide whether to select First row contains series names and First column contains category names check boxes.

  3. Check the appearance of the chart under Chart preview, and then click Next to continue to the third and last step of the wizard.


Specifying chart titles (Step 3)

In the last step of the Chart Wizard, you enter an optional chart title, choose its position, and enter optional axis titles.

  1. Enter a chart title in the Chart title text box and select its position using the radio buttons under Chart title location.
  2. Enter titles for the X and Y axes under Axis titles.
  3. Check the appearance of the chart under Chart Preview, and then click Finish to exit the Chart Wizard. The chart will be inserted just under the table from which it was created.


Chart Types

The following basic chart types are available:

Column Charts

Bar Charts

Line Graphs

Scatter Graphs

Pie Charts

Doughnut Charts

Stacked Area Charts

Radar Charts


Column Charts

Description

Like bar charts, column charts are used to compare the magnitude of several items, especially over time.

A stacked column chart is used to show how each datum changes with respect to the entire data group. In particular, 3D column charts, like the one below, make it possible for data to be compared and to show trends in two axes.

top


Bar Charts

Description

Bar charts are used to compare the magnitude of several items.

A stacked bar chart shows, for each item, the contribution of several categories to a total.


Line Graphs

Description

Line graphs are commonly used to show trends over a period of time.


Scatter Graphs

Description

Scatter graphs are used to display many kinds of data, especially scientific data.
They are commonly used to show time-based processes or trends.


Pie Charts

Description

Pie charts show the percentage contribution of several items to a total.

The above example shows a dominant item being emphasized. You can also isolate an item, as in the example below.


Doughnut Charts

Description

Doughnut charts, like pie charts, can show the percentage contribution of several items to a total, but they can show several categories together.


Stacked Area Charts

Description

Stacked area charts are typically used to show how the contribution of several items to a total changes over time.


Radar Charts

Description

A radar chart is often used to compare data values. It is useful for assessing which kinds of data are dominant and in what items, and for analyzing relationships between items and kinds of data.


Resizing and modifying a chart

Charts can be resized with no loss of sharpness, because Namo WebEditor generates a new GIF image for the chart every time you resize it.

  1. Select the chart by clicking it once.
  2. Click and drag any of its resize handles to the size you want.

Various properties and options of a chart can be modified in the Chart Properties dialog box. To open the dialog box, double-click a chart. The dialog box consists of seven tabs. The first tab, Chart Type, lets you change the chart's type or subtype; it is identical to the first step of the Chart Wizard. The second tab, Title, lets you change the chart's title and axis titles; it is the same as the third step of the Chart Wizard.

When you resize a chart, its text elements, such as titles, axis labels, and legend labels, remain the same size. The size of the text elements can be modified in the Chart Formatting tab of the Chart Properties dialog box.


Changing the chart type

You can change the chart type after creating one. There are 8 different chart types provided in the Chart Wizard that you can choose from; Column Chart, Bar Chart, Line Graphs, Scatter Graphs, Pie Chart, Doughnut Chart, Stacked Area Chart and Radar Chart.

To change the chart type, double-click the chart or select Chart Properties... from the chart shortcut menu. In the Chart Type tab of the Chart Properties dialog box, select the chart type you want and specify other settings such as 3D effect.

Using 3D effect may make it somewhat difficult to read a chart accurately. In general, you should use 3D effect only when you wish to communicate the relative sizes of values, rather than precise values.

Changing the chart type

  1. Create a chart.
  2. Double-click the chart or select Chart Properties... from the chart shortcut menu.
  3. In the Chart Type tab of the Chart Properties dialog box, select 'Bar chart' using the buttons at the top of the dialog box. Select '100% stacked bar' subtype using the large icons in the selection box. When you click a subtype icon, a description appears below the selection box.
  4. Under 3D effect, select Use 3D effect check box.
  5. Confirm the appearance of the chart in the Chart preview and click OK.

top


Changing the chart title

You can change the chart title after creating one.

To change the chart title, double-click the chart or select Chart Properties... from the chart shortcut menu. In the Title tab of the Chart Properties dialog box, enter a new title in the Chart title text box.

Modifying the chart title

  1. Create a chart.
  2. Double-click the chart or select Chart Properties... from the chart shortcut menu.
  3. In the Title tab of the Chart Properties dialog box, enter 'Market Share' in the Chart title text box.
  4. Specify the Chart title location to 'Center, Top'.
  5. Change the X-axis title to 'Country'.
  6. Confirm the appearance of the chart in the Chart preview and click OK.

top


Modifying a chart's appearance

The Chart Formatting tab of the Chart Properties dialog box enables you to modify the appearance of any of the elements in a chart. The appearance properties are divided into four categories: Text, Color, Lines/borders, and Data points. Not every category is applicable to every chart element. For instance, text attributes are not applicable to gridlines. If a category is not applicable to the selected element, the options in the category are disabled. The Data points category is only applicable to data series.

  1. First, select an element in the list box on the left side of the dialog box. Each data series is listed in the list box by a number in brackets, followed by the series name, if any; for example, "[3]France". If the chart has trend lines, each trend line is listed by the name of the data series to which it applies, followed by the trend line type; for example, "France, Linear".
  2. Some elements have optional properties that are hidden by default. For instance, the main title can have a background color and a border, but these are hidden by default. To show the property, deselect the Hide check box next to the property control, and specify the settings
  3. Use the Element preview and Chart preview to check the effect of any modification you make to the elements.

If you select Background in the element list and select Hide in the Color category, the chart's background will be made transparent.

top


Adding and removing data series or categories

You can use the Values tab to add or remove data series or categories in the chart by adding or removing columns or rows in the table at the top of the dialog box.

  1. To add a new data series, right-click a column header and select Insert Columns in the shortcut menu. The new data series will be inserted to the left.
  2. To add a new data series at the end, right-click the gray area to the right of the last column header.
  3. To add a new category, right-click a row header and select Insert Rows in the shortcut menu. The new category will be inserted above the selected row.
  4. To add a new category at the end, right-click the gray area below the last row header.
  5. After adding a data series or category, enter its name and values directly in the table by double-clicking each cell, or use the Value text box.
  6. To delete a data series or category, right-click the corresponding column or row header and select Delete Columns or Delete Rows in the shortcut menu.
  7. To undo any changes, press <Ctrl + Z>. Press <Ctrl + Z> to repeatedly undo multiple changes.


Modifying series options

The Series tab of the Chart Properties dialog box lets you modify a number of options for each data series in a chart. In addition, it lets you select a location for the chart's legend or hide the legend.

To modify options for a series, first select the series in the list box on the left side of the dialog box. The options are described below.

  • Series name
    The name of the selected series. If you select First row contains series names check box in the second step of the Chart Wizard, the existing name can be changed. Otherwise, you can enter a name in the text box. The series name is used to identify the series in the chart's legend.
  • Plot series on
    By default, the values in all series are plotted on the primary Y axis, of which the scale is on the left side of the chart. To plot the selected series on the alternate Y axis, select Alternate axis. The alternate axis's scale will be added on the right side of the chart. (Use the settings in the Axis tab to modify the alternate axis's properties.)
  • Data labels
    Select a type of label to put next to each data point. The available choices are None, Series name, Data value, and Percentage with markers.
  • 3D pie chart options
    For a pie or doughnut chart with the 3D effect enabled, you can choose to pull out or raise up the "slice" corresponding to the selected series, in order to make it stand out from the other slices.
  • Error bar format
    Column and bar charts, and line graphs, can have error bars on the data points in any series. Choose an error bar format in the drop-down menu, and then choose an error format using the radio buttons.
  • Legend position
    Select the legend location or Hide legend to hide the legend.

top


Modifying axis options

The Axis tab of the Chart Properties dialog box lets you configure the scale of the primary Y axis and, if it exists, of the secondary Y axis of a chart.

  1. Select a Y axis to modify in the list box on the left side of the dialog box.
  2. To change the scale type from the default linear scale to another type, select the type in the Scale type drop-down menu. In addition to linear, two logarithmic scale types are available.
  3. By default, the scale ranges and interval between gridlines are configured automatically. To configure the range and intervals of the selected scale manually, deselect Configure data range automatically, and then enter minimum and maximum values, the interval between major gridlines, and the number of minor gridlines between major gridlines.
  4. You can also edit the title of the selected axis in the Title text box.

top


Editing the values in a chart

Once you create it, a chart is not dependent on the table from which it was created. The Chart Wizard copies the names and values from the table to the part of the document that is invisible in the Edit window or a browser, and these copies are what the chart displays. As a result, you cannot edit the values in the chart by editing the values in the table from which it was created.

You can, however, edit the values in a chart using the Values tab of the Chart Properties dialog box. You can also use this tab to swap the axes of the chart, so that data series become categories, and vice versa. The spreadsheet-like table at the top of the dialog box displays the series names, category names, and values used in the chart.

  1. To edit a name or value, double-click it in the table and enter a new name or value.
  2. Alternatively, select the cell containing the name or value and edit it in the Value text box.
  3. To undo a change, press <Ctrl + Z>. Press <Ctrl + Z> to repeatedly undo multiple changes.
  4. Click Swap X/Y Axis to swap the data series and categories in the chart.


Adding trendlines

The Trendlines tab of the Chart Properties dialog box enables you to add a trendline to any data series in a chart.

  1. Select the series in the list box under Select series.
  2. Select a trend line type in the list box under Trendline type.
  3. If the selected trend line type is Moving average, specify the Interval under Trendline options. If the selected trend line type is Polynomical, specify the Degree under Trendline options.
  4. Click Add. The specified trendline will appear in the list box under Displayed trendlines.

If you wish to show the data series and type of each trend line in the legend, select Show trendlines in legend under Trendline options.

The color, style and thickness of each trendline can be modified in the Chart Formatting tab.


Changing the default folder for chart image files

By default, Namo WebEditor saves a chart image in a sub-folder named "images" in the folder containing the document that contains the chart. This folder is created automatically if it does not already exist. For example, if a document containing a chart is saved in C:\html, Namo WebEditor saves the chart images in C:\html\images.

  1. Select [Tool > Preferences...] in the menu to open the Preferences dialog box.
  2. Switch to the Save tab.
  3. In the Save Smart Button, equation and chart images in text box, enter the path of the folder in which to save chart images, in terms relative to the document folder.
  4. Click OK.

All new chart images will be saved in the specified folder relative to the document folder. Any existing chart images in an open document will be copied to the new folder when the document is saved. However, any existing chart images in a document that is not open will be copied to the new folder until you open the document.

Below are some examples of relative folder paths.

When publishing a document containing charts, be sure also to publish the folder containing the chart images.

top


Chart Wizard - Chart Type (Step 1 of 3)

[Insert > Other > Chart... - Step 1], [Table shortcut menu > Table > Chart... - Step 1], Chart Wizard

In this step, you select a chart type.

Selecting a chart type

Select the basic chart type using the small icons at the top of the dialog box. There are eight basic types: column, bar, line, scatter, pie, doughnut, stacked area and radar.

Selecting a sub-type

Once you've selected a basic chart type, select a sub-type using the large icons in the white area. A brief description of the selected sub-type appears immediately below the white area.

3D effect

  • Use 3D effect
    Enable this check box to give the chart a 3D effect. Not available for line, scatter, stacked area, or radar graph types.

    • If you choose a 3D column chart, you must enable the 3D effect in order for the chart to appear correctly.

  • Depth of 3D effect
    Specify the depth of the 3D effect (the chart's length along the Z axis) as a percentage of the chart's length along the primary axis.

    • For doughnut and pie charts, the depth of the 3D effect is specified as a percentage of the diameter of the chart.

  • 3D perspective angle
    Specify the (vertical) perspective angle of the 3D effect. This affects how "high above" the chart the viewpoint appears to be.


Chart Wizard - Data Series (Step 2 of 3)

[Insert > Other > Chart... - Step 2], [Table shortcut menu > Table > Chart... - Step 2], Chart Wizard

In this step, you specify how the Chart Wizard should read the rows and columns of the table.

Series and categories

  • First row contains series names
    If this check box is selected, the first row of the table (or of the selected cells) will be considered to contain the names of the data series in the rows below it. Otherwise, the first row will be considered as one of the data series.
  • First column contains category names
    If this check box is selected, the first column of the table (or of the selected cells) will be considered to contain X-axis labels. Otherwise, the first column will be considered to contain data values.

X/Y axis

  • Swap X/Y axis
    Swaps the X and Y axes.


Chart Wizard - Title (Step 3 of 3)

[Insert > Other > Chart... - Step 3], [Table shortcut menu > Table > Chart... - Step 3], Chart Wizard

In the last step of the Chart Wizard, you can edit the titles of a chart.

Chart title

Enter the title of the entire chart.

Chart title location

Specify the location of the chart, or click Hide title if you don't want the title to be visible.

Axis titles

  • X-axis title
    Enter a title for the X-axis.
  • Y-axis title
    Enter a title for the Y-axis.
  • Alternate Y-axis title
    Enter a title for the alternate Y-axis, if any.


Chart Properties dialog box

[Chart shortcut menu > Chart Properties...]

Enables you to modify or add established chart properties as needed.

Change Chart Settings

  • Chart Type tab
    Select your chart type.
  • Title tab
    Edit the titles of a chart.
  • Series tab
    Edit or input data-related legends to display.
  • Values tab
    Edit the data range set for a chart, or adds data.
  • Trendlines tab
    Add a separate line to easily identify data trends on a chart, or modify settings.
  • Axis tab
    Modify the settings for axis titles or data indication ranges.
  • Chart Formatting tab
    Modify settings for texts, graph line styles/colors and data points. They are all displayed on a chart.


Chart Properties dialog box - Chart Type tab

[Chart shortcut menu > Chart Properties... - Chart Type tab]

You can change the type of the selected chart and apply or remove a 3D effect for the chart.

Selecting a chart type

Select the basic chart type using the small icons at the top of the dialog box. There are eight basic types: column, bar, line, scatter, pie, doughnut, stacked area and radar.

Selecting a sub-type

Once you've selected a basic chart type, select a sub-type using the large icons in the white area. A brief description of the selected sub-type appears immediately below the white area.

3D effect

  • Use 3D effect
    Enable this check box to give the chart a 3D effect. Not available for line, scatter, stacked area, or radar graph types.

    • If you choose a 3D column chart, you must enable the 3D effect in order for the chart to appear correctly.

  • Depth of 3D effect
    Specify the depth of the 3D effect (the chart's length along the Z axis) as a percentage of the chart's length along the primary axis.

    • For doughnut and pie charts, the depth of the 3D effect is specified as a percentage of the diameter of the chart.

  • 3D perspective angle
    Specify the (vertical) perspective angle of the 3D effect. This affects how "high above" the chart the viewpoint appears to be.

top


Chart Properties dialog box - Title tab

[Chart shortcut menu > Chart Properties... - Chart Title tab]

You can edit the main and axis titles of a chart.

Chart title

Enter the title of the entire chart.

Chart title location

Specify the location of the chart, or click Hide title if you don't want the title to be visible.

Axis titles

  • X-axis title
    Enter a title for the X-axis.
  • Y-axis title
    Enter a title for the Y-axis.
  • Alternate Y-axis title
    Enter a title for the alternate Y-axis, if any.


Chart Properties dialog box - Series tab

[Chart shortcut menu > Chart... - Series tab]

You can change various options regarding data series in a chart. To edit the options for a data series, first select the series in the list box on the left side of the dialog box, then use the settings described below.

Series name

Each series should have a name to identify it in the legend. If you opted to have the first row of the table (on which the chart is based) treated as containing series names, then each series will already have a name. You can name or rename the selected series by typing a new name here.

Plot series on

Select whether to plot the selected series on the Primary axis or the Alternate axis.

Data labels

You can have labels appear at each data point in the selected series. The labels can show either the Series name or the Data value; select the desired label type from the drop-down menu.

3D pie chart options

These options are only available for pie and doughnut charts.
  • Pull slice out
    The slice representing the selected series will be "pulled out" from the rest of chart, as in the example below.
  • Raise slice up
    The slice representing the selected series will be raised above the rest of the chart, as in the example below.

Error bar format

You can have error bars appear at each data point in the selected series. Select an error bar format in the Error bar format drop-down menu, then choose an error type by clicking one of the radio buttons underneath it.

Legend position

You can choose the position for the legend relative to the chart by using the four radio buttons arranged in a diamond pattern at the right side of the dialog box. (This setting is not series-specific.) Select Hide legend if you don't want the legend to be visible.

top


Chart Properties dialog box - Values tab

[Chart shortcut menu > Chart Properties... - Values tab]
When you create a chart from a table using the Chart Wizard, the data from the table is copied to a special area of the document's HTML source, apart from the table. (This special area is only used by Namo WebEditor; it is ignored by Web browsers.). Even if you delete the table on which the chart is based, the chart remains intact. However, as a result, any changes you make to the data in the table are not reflected automatically in the chart. To change, add, or remove data in the chart, you must do so using the Values tab of the Chart Properties dialog box.

Editing the values in a chart

The Values tab of the Chart Properties dialog box shows the values, series names, and categories of the selected chart in a spreadsheet-like table. To edit a value, double-click the cell containing the value and enter the new value.

Adding data series or categories

To add a data series to the chart, right-click a column header and select Insert Column in the shortcut menu. A new column will be inserted to the left of the column you clicked on. To add a data series after the rightmost one, right-click in the gray area to the right of the rightmost column.

To add a category to the chart, right-click a row header and select Insert Row in the shortcut menu. A new category will be inserted above the row you clicked on. To add a category below the bottom one, right-click in the gray area below the bottom row.

To undo adding a data series or category, right-click anywhere in the table and select Undo from the shortcut menu, or type <Ctrl + Z>.

The new data series or category that you added will have values of zero in each cell. Enter the desired values as described above.

Deleting a data series or category

To delete a data series, right-click a column header and select Delete Column in the shortcut menu. To delete a category, right-click a row header and select Delete Row in the shortcut menu.

Swapping data series and categories

To turn data series into categories and vice versa, click Swap X/Y Axis.

top


Chart Properties dialog box - Trendlines tab

[Chart shortcut menu > Chart... - Trendlines tab]

You can add or remove trendlines for each data series in a chart.

Select series

Select a data series to put a trendline on.

Trendline type

Choose what type of trendline to put on the selected data series.
  • Add button
    Click to add the selected trendline to the chart.
  • Remove button
    Click to remove the selected trendline from the chart.

Displayed trendlines

This list box shows the trendlines that have been added to the chart.

Trendline options

  • Interval
    Specify the interval for a moving average trendline. Not applicable to other types of trendlines.
  • Degree
    Specify the degree for a polynomial trendline. Not applicable to other types of trendlines.
  • Show trendlines in legend
    Enable this check box to show trendlines in the chart's legend. This setting applies to all displayed trendlines.

top


Chart Properties dialog box - Axis tab

[Chart shortcut menu > Chart... - Axis tab]

You can edit the properties of the current chart's axes. Select an axis in the list box on the left side of the dialog box, then edit its properties as described below.

Title

Enter or edit the name of the selected axis. This will appear below or beside the selected axis in the chart.

Scale type

Specify the scale type of the selected axis. The available choices are Linear, Logarithmic (Base 2), and Logarithmic (Base 10). The scale type can only be specified when you selected Y-axis (primary or alternate).

Configure data range automatically

If this check box is selected, the range of the selected Y-axis (primary or alternate) is configured automatically to fit the values in the chart. Deselect this check box if you want to configure the range manually.

The range can be configured manually using the settings described below:

  • Min. value
    Enter the minimum value for the range. The range will start at this value.
  • Max. value
    Enter the maximum value for the range. The range will end at this value.
  • Major scale
    Enter the distance between major gridlines for the selected axis, in terms of the units of the axis.
  • Minor scale
    Enter the number of divisions between major gridlines. Minor gridlines will be drawn at each division.

top


Chart Properties dialog box -Chart Formatting tab

[Chart shortcut menu > Chart... - Chart Formatting tab]

You can edit the appearance of various elements of a chart.

The Chart Formatting tab of the Chart Properties dialog box gives you full control over the appearance of each of the elements of a chart created using the Chart Wizard. To edit the appearance of a chart element, select the element in the list box on the left side of the dialog box, then edit the attributes for that element as described below.

Not all attributes are available for all chart elements. If an attribute is not applicable to the selected element, it will be disabled.

If the chart contains any trendlines, the trendlines will be listed by name at the bottom of the list box.

  • Text
    Click Font... to choose a font for the selected element. Click Hide to hide the text of the selected element.
  • Color
    Choose a background color for the selected element in the drop-down color menu. Click Hide to make the color transparent.
  • Lines/borders
    Choose a color for the selected line element or for the border of the selected compound element in the drop-down color menu. Click Hide to hide the line or border.
    Choose a style for the line or border in the Style drop-down menu.
    Choose the thickness of the line or border in the Thickness drop-down menu.

    • Line elements are elements that consist only of lines, such as gridlines and trendlines. Compound elements are elements that have several parts including a border, such as the main title and the legend box.

  • Data points
    Choose a style for the data point markers in the Style drop-down menu.
    You can give the data point markers drop shadows by selecting a drop shadow style in the Effect drop-down menu.

    • These attributes are only applicable to charts that have markers at each data point, such as scatter graphs and certain line and radar charts. To edit the appearance of data point markers, select a series in the list box first.
    Choose a color for the data point markers in the drop-down color menu. Click Hide to hide the markers.

top


What is a Task Automation?

It is very likely that you will perform some tasks repeatedly while editing your Web documents. There is no need to repeat the same task over and over again. Instead, you can use Namo WebEditor's task automation features, which include Quick Insert, Key Macros, and Document Outline.

  • Quick Insert
    Quick Insert provides a quick way to insert long, frequently-used phrases, sentences, or paragraphs without having to retype them each time. You can enter a single word or even a single character, then type <Ctrl + => to instantly replace the shortcut with the actual text. To add a Quick Insert item including font or paragraph styles, you should save the item as an HTML file.
  • Macros
    A macro allows you to record a repeated sequence of keystrokes and execute it in a single command. While Quick Insert relieves you from the chore of repeatedly inserting the same item, a macro lets you take care of repeated steps, such as copying and pasting a word or phrase. If you find yourself using the same sequence of keystrokes repeatedly, you can record a key macro to save the sequence. Then, rather than always retyping the same keystrokes, you can simply play the macro. Since all menu commands, and most operations in dialog boxes can be accomplished using keystrokes, key macros can do much more than just input text.
    Key macros do not record mouse movements or clicks, so avoid using the mouse while you are recording a key macro. Accordingly, when recording a macro, you should perform a set of tasks, which are supported by Namo WebEditor's shortcuts, using only the keyboard.
  • Inserting a document outline
    Namo WebEditor supports document outline creation, which lets you grasp the structure of a document. Select the [Window >Document Outline] menu command or press the shortcut key <Alt+3> and a document online is created including the paragraph headings and list items within the document. Using this feature, you can also create a table of contents for the document. The Make Table of Contents command takes care of a series of tasks automatically, including inserting bookmarks in each heading or list items, and creating hyperlinks linking the table of contents and the created bookmarks.

top


Using Quick Insert

You can insert a Quick Insert item into the document.

  1. Place the cursor where you want to insert a frequently used phrase or sentence as a Quick Insert item.
  2. Select the [Tools > Quick Insert...] menu command.
  3. In the Quick Insert dialog box, select the desired item among the ones you have added and click Insert.
  4. Click Close.

Alternatively, you can insert a Quick Insert item by typing in its shortcut and pressing <Ctrl + => in the Edit window.

Example

  1. First, add a Quick Insert item.
  2. In the Edit window, type 'namo', which is the added Quick Insert item's shortcut for "This is Namo Interactive Inc. Thank you for visiting our Web site."
  3. Press <Ctrl + =>.
  4. The typed text 'namo' turns into the Quick Insert text; "This is Namo Interactive Inc. Thank you for visiting our Web site."


Adding a Quick Insert item

You can rapidly edit your Web document by saving frequently used phrases or sentences as Quick Insert items.

  1. Select the [Tools > Quick Insert...] menu command.
  2. In the Quick Insert dialog box, click Add....
  3. In the Add Quick Insert dialog box, enter the shortcut which will be used to trigger the Quick Insert item.
  4. Choose Text to enter the replacement text directly in the dialog box. Enter the text in the provided text box. You can enter only plain unformatted text in the Text field. If you want to insert formatted text using Quick Insert, enter the formatted text into an HTML file, save the file, then specify the file in the File field.
  5. Click OK. To add more Quick Insert items, repeat steps 2-4.
  6. In the Quick Insert dialog box, click Close.

To remove a Quick Insert item, select the item you want to delete in the Quick Insert dialog box and click Remove. The message "Are you sure you want to delete the selected item? *" appears. Click Yes and the selected item is removed from the list.

Example

To add the sentence "This is Namo Interactive Inc. Thank you for visiting our Web site." as a Quick Insert item, take the following steps.

  1. Select the [Tools > Quick Insert...] menu command.
  2. In the Quick Insert dialog box, click Add....
  3. In the Add Quick Insert dialog box, enter "This is Namo Interactive Inc. Thank you for visiting our Web site." in the Text field under Item to insert and click OK.

  4. In the Quick Insert dialog box, click Close.

If you use the Text field for adding a Quick Insert item, you cannot add items containing font or paragraph styles. To add a Quick Insert item including such styles, you should save the item as a HTML file select the file by checking File and specifying the file after clicking the Browse... button.

top


Working with key macros

You can create a key macro by recording key strokes either after or before naming it in the Key Macro Manager dialog box.

Recording a key macro after naming it

  1. Select the [Tools > Key Macro > Key Macro Manager...] menu command.
  2. In the Key Macro Manager dialog box, click Add....
  3. In the Add Key Macro dialog box, enter Macro name and Description.
  4. Select Record new macro under Source and click OK.
  5. The mouse pointer changes into a small cassette tape( [image]) icon while the Edit window appears.
  6. Perform the sequence of keystrokes you want to record.
  7. Select the [Tools > Key Macro > Stop Recording] menu command.

Saving a previously recorded macro

  1. First, Record a key macro.
  2. Select the [Tools > Key Macro > Key Macro Manager...] menu command.
  3. In the Key Macro Manager dialog box, click Add....
  4. In the Add Key Macro dialog box, enter Macro name and Description.
  5. Select Saving a previously recorded macro under Source and click OK.
  6. In the Key Macro Manager dialog box, click Close.


Recording a key macro

Macro remembers a sequence of keystrokes and automatically repeats them in a single command. You need to record the keystrokes as a macro before using it.
  1. Select the [Tools > Key Macro > Start Recording] menu command. Your mouse pointer changes into a small cassette tape ( [image]) icon.
  2. Perform the sequence of keystrokes you wish to record.
  3. Select the [Tools > Key Macro > Stop Recording] menu command.

You can start and stop recording key macros using the <Ctrl + Shift + M> shortcut key.

Example

To record the task of making the word to the right of the cursor bolded as a key macro, do this:

  1. Select the [Tools > Key Macro > Start Recording] menu command. The mouse pointer changes into a small cassette tape ( [image]) icon.
  2. Select the word by pressing <Ctrl + Shift + →>.
  3. Make the word bolded by pressing <Ctrl + B>.
  4. Deselect the word by pressing <Esc>.
  5. Select the [Tools > Key Macro > Stop Recording] menu command.


Playing a key macro

Play a key macro you have previously recorded. Either play the most recently recorded key macro using a shortcut, or select from the list in the Key Macro Manager dialog box.

Playing the most recently recorded key macro

  1. Record a key macro.
  2. Select the [Tools > Key Macro > Play Macro] menu command or press the shortcut key <Ctrl + M>. The macro you have just recorded is executed.

Selecting and executing a key macro among the ones you have previously recorded

  1. Select the [Tools > Key Macro > Key Macro Manager...] menu command or press the shortcut key <Ctrl + Shift + 0>.
  2. In the Key Macro Manager dialog box, select the desired macro, specify how many times you want to repeat the macro in the Repetitions text box, and click Play Macro.

Example

  1. Record a key macro, which will make the word to the right of your cursor bolded.
  2. Place the cursor where you want to execute the key macro.
  3. Select the [Tools > Key Macro > Play Macro] menu command or press the shortcut key <Ctrl + M>.


Creating a table of contents using document outline

You can create a table of contents for your Web document. Namo WebEditor automatically generates a table of contents utilizing HTML styles applied to the texts. You can preview the table of contents on the gray left side of the Edit window, and edit it by changing paragraph style of the texts. In the table of contents, Heading 1 will be the biggest title while Heading 6 being the smallest.

  1. Create a document in the Edit window.
  2. Select the [Window >Document Outline] menu command.
  3. A document outline is displayed at the left side of the Edit window.
  4. Right-click the document outline and specify the hierarchy of the items that will be displayed in the table of contents to be created. If you select Show All, all the headings will be displayed.
  5. Right-click the document outline and click Make Table of Contents....
  6. In the Make Table of Contents dialog box, check both Create hyperlinks to the contents and Insert bookmarks when making hyperlinks.

  7. Click OK.

To create a document outline, the title of your Web document should be specified as a heading using HTML Style from the drop-down menu on the Formatting Toolbar.


Quick Insert dialog box

[Tools > Quick Insert...], Quick Insert

Quick Insert provides a quick way to insert long, frequently-used phrases, sentences, or paragraphs without having to retype them each time. You can enter a single word even a single character, then type <Ctrl + => to instantly replace the shortcut with the actual text. To add a Quick Insert item including font or paragraph styles, you should save the item as a HTML file.

The Quick Insert list

The list box shows the current Quick Insert items. The Shortcut column shows the shortcut word or character used to insert the item. The Text or file column shows the full text or the path and filename of the file that will be inserted.

  • Add... button
    Adds a new shortcut. Click the Add... button to open the Add Quick Insert dialog box.
  • Edit... button
    Select a Quick Insert item and click the Edit... button to modify the selected Quick Insert item in the Edit Quick Insert dialog box.
  • Remove button
    Deletes selected Quick Insert items. You will be prompted whether you really want to delete the items.
  • Insert button
    Inserts the selected Quick Insert item into the current document at the current cursor location. This is the same as typing the item's shortcut in the Edit window and pressing <Ctrl + =>.
  • Close button
    Closes the Quick Insert dialog box.

The file types that you can insert with Quick Insert include HTML, Microsoft Word, and plain text files. When you use Quick Insert to insert a Microsoft Word file, the External File Import Options dialog box will appear, as if you had used the [File > Open...] command to open the Microsoft Word file. When you use Quick Insert to insert a plain text file, the Open File As dialog box will appear, as if you had used the [File > Open...] command to open the text file.

If you specify an HTML file, there is virtually no restriction to the type of content that you can insert using Quick Insert. You can use Quick Insert for formatted text, tables, images, JavaScripts, or any other type of content that can be saved in an HTML document.

top


Add Quick Insert dialog box

[Tools > Quick Insert... - Add... button], [image] - Add... button

You can add an item to the Quick Insert list.

Shortcut

Enter the shortcut that will be used (in combination with <Ctrl + =>) to trigger the Quick Insert item.

Item to insert

  • Text
    Select this radio button to enter the replacement text directly in the dialog box. Enter the text in the provided text box. You can only enter plain, unformatted text into the Text field. If you want to insert formatted text using Quick Insert, put the formatted text into an HTML file, save the file, then specify the file in the File field (see below).
  • File
    Select this radio button to specify a file to insert into the document when you use this Quick Insert item. The file can be in HTML, Microsoft Word, or plain text format.

If you specify an HTML file, there is virtually no restriction to the type of content that you can insert using Quick Insert. You can use Quick Insert to insert formatted text, tables, images, JavaScripts, or any other type of content that can be saved in an HTML document.

If you use Quick Insert to insert a Microsoft Word file, the External File Import Options dialog box will appear, as if you had used the [File > Open...] command to open the file. If you use Quick Insert to insert a plain text file, the Open File As dialog box will appear, as if you had used the [File > Open...] command to open the text file.


Key Macro Manager dialog box

[Tools > Key Macro > Key Macro Manager...], <Ctrl + Shift + 0>

A key macro is a recorded sequence of keystrokes that can be "played back" at any time. If you find yourself repeatedly using the same sequence of keystrokes, you can record a key macro to save the sequence. Then, rather than typing the same keystrokes over and over again, you can just play the macro. Since all menu commands and most operations in dialog boxes can be accomplished using keystrokes, key macros can do much more than just input text.
  • Add... button
    Click to open the Add Key Macro dialog box, where you can enter the information for a new macro.
  • Remove button
    Click to delete the selected macro.
  • Play Macro button
    Click to play the selected macro. The dialog box will close and the selected macro will play in the Edit window.
  • Repetitions
    Specifies the number of times to repeat playback of the selected macro upon clicking Play Macro.

Key macros do not record mouse movements or clicks, so avoid using the mouse while you are recording a key macro.

Operations in some dialog boxes, such as the Site Wizard and the Script Wizard, are not properly recorded. If you record a keystroke sequence involving such dialog boxes, the key macro may not play correctly.


Add Key Macro dialog box

[Tools > Key Macro > Key Macro Manager... - Add.. button]

You can add a new key macro or save a previously recorded key macro.

Macro name

Allows you to enter a name for the new key macro.

Description

Allows you to enter a description of the new macro.

Source

  • Record new macro
    Select this option to record a new macro. When you click OK to close the dialog box, you will be immediately returned to the Edit window. The mouse pointer will appear as a small cassette tape ( [image]) icon, indicating that recording is in progress.
  • Save previously recorded macro
    Select this option if you previously recorded a macro using the [Tools > Key Macro > Start Recording] menu command and you now wish to save the macro as a named macro.


Make Table of Contents dialog box

[Window > Document Outline - Shortcut menu - Make Table of Contents], <Alt + 3>

You can create a table of contents for the current document and inserts it at the top of the document.

If the current document contains headings using the standard HTML heading tags (<H1>, <H2>, etc.), you can use this command to automatically generate a simple table of contents that will list each heading. Each item in the table of contents can optionally link to the corresponding heading. The table of contents will be inserted at the top of the document.

  • Create hyperlinks to the contents
    If this option is selected, each item in the TOC will link to the corresponding heading in the document if there is a bookmark on the heading. To have Namo WebEditor automatically create bookmarks on each heading that doesn't already have one, select Insert bookmarks when making hyperlinks in addition to this option.
  • Insert bookmarks when making hyperlinks
    If this option and Create hyperlinks to the contents are both selected, Namo WebEditor will automatically create bookmarks on the headers in the document so that the TOC items can link to them.
  • Indent
    Specify the number of spaces to insert in front of TOC items that refer to second-level headings (<H2>). Items that refer to third-level headings will be indented with twice the specified number of spaces, items that refer to fourth-level headings will be indented with three times the number of spaces, etc.


XML Overview

What is XML?

XML (eXtensible Markup Language) is a document format used on the World Wide Web and sanctioned by the W3C. It provides more flexibility for designing Web pages than HTML. Both HTML and XML are descendents of SGML (Standard Generalized Markup Language).

Whereas HTML uses a fixed set of tags (codes) to describe Web pages, XML maintains the flexible meta-language characteristic of SGML by allowing the author to define the tags that will be used in each document.

For example, in HTML, a paragraph title is written in the form,

<H1>Namo Interactive</H1>

whereas in XML it might take the following form:

<Paragraph Title>Namo Interactive</Paragraph Title>

As you see in the above example, if you use XML, you can create easily recognizable tags. This helps you create more readable source. Additionally, this characteristic of XML allows it to be used as a medium for the transfer of information between disparate systems or formats.

However, in order for a Web browser to render <Paragraph Title>Namo Interactive</Paragraph Title>, the author of the XML document must specify in advance how the <Paragraph Title> tag should be handled by the browser. To define the meanings and characteristics of user tags, XML uses DTD (Document Type Definition), which is a method of defining the functions and components of particular tags.

Namo WebEditor contains menu commands for adding or editing XML elements such as the following, but other elements must be added or edited in HTML source mode manually:

Elements

Text

CDATA

Comment

Entity Reference

PI

XML documents are easy to edit due to node clonability.

Node Clone

An example XML document made using Namo WebEditor's XML commands may be found in the doc subfolder of the folder where Namo WebEditor was installed, with the filename address.xml. However, this example also uses another standard called XSL, so it is a little different from a plain XML document.

Namo WebEditor 5 can be used to open, edit and save XML documents. However, it does not support all XML functions. For instance, it does not support DTD creation and linking, or style sheet creation and linking. Users experienced in XML can do these tasks manually by entering source code in the HTML window. Also, Namo WebEditor can only display XML documents that use Unicode (UTF-8) encoding.

Only a few current browsers can display the XML document format. To view an XML document, you should have version 4.0 or higher (5.0 recommended) of Internet Explorer or Netscape installed on your computer.

The following are the XML Reference Sites: W3C - XML, XML.com, XML.org, The XML cover page.

top


XML Element dialog box

[Insert > XML > Element...]

You can insert an element in a XML document.

Inserting an element

  • Name
    In this drop-down menu, select an element to insert. You can also type the element name.
    If you enter the name of an element that hasn't been declared, the element will still be inserted, but an error will occur when you try to save the document or display it in a browser.
  • Attribute list
    The list box lists the attributes of the element, if any.
  • Add... button
    Click to add an attribute to the element. Enter the name and value of the attribute in the Attribute Name and Value dialog box.
  • Modify... button
    Click to modify the selected attribute. Edit the name or the value of the attribute in the Attribute Name and Value dialog box.
  • Remove button
    Click to remove the selected attribute.

In the Edit window, XML elements are represented by the [image] icon.

A sample XML document, address.xml, may be found in the doc subfolder of the Namo WebEditor installation folder. (If you installed Namo WebEditor using the default install location, the sample document would be located at C:\Program Files\Namo\WebEditor 4\doc\address.xml.


XML Text (PCDATA) dialog box

[Insert > XML > Text...]

You can insert text content into an element in an XML document.

Inserting text content

To insert text content (PCDATA) into the selected element, simply type the text into the text box and click OK.

The text will appear in the XML source between the tags of the selected element.

In the Edit window, the text content will be represented by the [image] icon under the selected element.

A sample XML document, address.xml, may be found in the doc subfolder of the Namo WebEditor installation folder. (If you installed Namo WebEditor using the default install location, the sample document would be located at C:\Program Files\Namo\WebEditor 4\doc\address.xml.


XML CDATA dialog box

[Insert > XML > CDATA...]

You can insert a CDATA (character data) section in an XML document.

What is CDATA?

CDATA is an XML tag that identifies a section of literal text. The text within a CDATA tag is displayed by the XML processor verbatim; no attempt is made to parse or interpret the text.

Inserting a CDATA section

To insert a CDATA section, simply type the desired text into the text box and click OK.

In the XML source, the entered text will be enclosed in a CDATA tag, as below:

    <![CDATA[This is some random text.]]>

In the Edit window, the CDATA section will be represented by the [image] icon.

A sample XML document, address.xml, may be found in the doc subfolder of the Namo WebEditor installation folder. (If you installed Namo WebEditor using the default install location, the sample document would be located at C:\Program Files\Namo\WebEditor 5\doc\address.xml.


XML Comment dialog box

[Insert > XML > Comment...]

You can insert a comment in an XML document.

Inserting a comment

To insert a comment, simply type it into the text box and click OK.

The comment will be inserted into the XML source surrounded by the comment tag, as below:

    <!--This is a comment. And what a comment it is.-->

In the Edit window, the comment will be represented by the [image] icon.

A sample XML document, address.xml, may be found in the doc subfolder of the Namo WebEditor installation folder. (If you installed Namo WebEditor using the default install location, the sample document would be located at C:\Program Files\Namo\WebEditor 4\doc\address.xml.


XML Entity Reference dialog box

[Insert > XML > Entity Reference...]

You can insert an entity reference in an XML document.

What is an entity reference?

An entity reference is a name that "stands for" some content. If an entity has been declared in the document's DTD, you can use an entity reference as a shortcut: instead of having to type the content out, you can just type an entity reference. For example, the entity reference &namo; might stand for "Namo Interactive Inc.". Entities are also useful when you expect some content to change frequently; instead of having to change each occurrence, you can just change the entity declaration.

Namo WebEditor 4 does not support declaring entities except by manual entry in the HTML window.

Inserting an entity reference

To insert an entity reference, select an entity name from the drop-down menu. (Only entities that have been declared appear in the drop-down menu.) You can also type the entity name.

If you enter the name of an entity that hasn't been declared, the entity reference will still be inserted, but an error will occur when you try to save the document or display it in a browser.

In the Edit window, entity references are represented by the [image] icon.

A sample XML document, address.xml, may be found in the doc subfolder of the Namo WebEditor installation folder. (If you installed Namo WebEditor using the default install location, the sample document would be located at C:\Program Files\Namo\WebEditor 4\doc\address.xml.


XML Processing Instruction (PI) dialog box

[Insert > XML > Processing Instruction...]

You can insert a processing instruction in an XML document.

What is a processing instruction?

A processing instruction (PI) is used to give an instruction the XML processor. Depending on the target, the instruction may be carried out by the XML processor or by another program. The format of a PI is as follows:

<?target data?>

For example, the following PI might be used to launch a calculator program and tell it to add three numbers:

<?calc.exe 1,2,3?>

Inserting a processing instruction

To insert a processing instruction enter the target and the data, separated by a space, in the text box, and click OK. Don't type the angle brackets and question marks.

In the Edit window, XML processing instructions are represented by the [image] icon.

A sample XML document, address.xml, may be found in the doc subfolder of the Namo WebEditor installation folder. (If you installed Namo WebEditor using the default install location, the sample document would be located at C:\Program Files\Namo\WebEditor 4\doc\address.xml.


XML Node Clone dialog box

[Insert > XML > Node Clone...]

You can "clone" (copy) a node in an XML document.

Cloning XML nodes

This dialog box lets you clone the selected node or nodes. The settings are described below.

  • Number of clones
    Specify how many copies of the selected node(s) to make.
  • Copy contents
    Select this option to copy the contents of the selected node(s) along with the nodes.
  • Copy child nodes
    Select this option to copy child nodes of the selected node(s) along with the nodes.

A sample XML document, address.xml, may be found in the doc subfolder of the Namo WebEditor installation folder. (If you installed Namo WebEditor using the default install location, the sample document would be located at C:\Program Files\Namo\WebEditor 4\doc\address.xml.


Attribute Name and Value dialog box

[Insert > Other > HTML tag... - Add.../Modify... button], [Insert > XML > Element... - Add.../Modify... button]

You can enter or edit an attribute of a tag that is not directly supported by Namo WebEditor.

Setting extended tag attributes

Advanced users may occasionally need to insert a tag that is not directly supported by Namo WebEditor. This may be the case if a tag is newer than the version of Namo WebEditor installed on the user's computer. For such cases, Namo WebEditor supports manually entering attributes of an unsupported tag in the Attribute Name and Value dialog box.
  • Name
    Add or modify the name of the attribute or the XML element.
  • Value
    Add or modify the value of the attribute or the XML element.

In the Attribute Name and Value dialog box, you can add attributes to the tag or add new elements to the XML document. It is useful when you use a tag that is not directly supported by Namo WebEditor.


Source Control Overview

What is Source Control?

If several people work on the same Web site project, it can occasionally occur that two or more people try to edit the same document simultaneously, which would result in conflicts when the document is saved. This problem can be avoided by having each user make a copy of the file on their local hard drive and only edit the local copy. This approach, however, creates another problem: you may not be able to keep track of which copy is the latest version, especially if more than one person copies the document.

Source Control is an effective way to avoid problems that arise when a team collaborates on the same set of documents. The basic idea of Source Control is that a database on the network stores the master copies of all documents and keeps track of who is working on a particular document. Users must "check out" a document before editing it, which makes a copy of the document on the user's local drive and prevents others from editing the document. When a user is finished editing, he or she "checks in" the document with the Source Control database, updating the master copy stored there. Also, If a user opens a local copy of a document without checking it out, he or she will not be able to make changes to the document. This prevents files from accidentally being replaced by another user's changes.

Namo WebEditor's implementation of Source Control leverages Microsoft SourceSafe software already installed on your network. If you wish to take advantage of Namo WebEditor's Source Control features, you must first install SourceSafe.

How Namo WebEditor implements Source Control

To implement Source Control features, Namo WebEditor interfaces with Microsoft SourceSafe, a popular Source Control software product. The Source Control menu in Namo WebEditor's Site Manager contains commands for working directly with a SourceSafe database. You can add a WebEditor project to the SourceSafe database, add or remove documents to or from Source Control, check in or check out documents, and get the latest version of a document, all from one menu.

To use Namo WebEditor's Source Control features, you need to have the SourceSafe server software installed on your network server, have or create a SourceSafe database on the server to store your Web project, and install the SourceSafe client software (SourceSafe Explorer) on each user's computer. Also, each user must be granted appropriate access rights to the SourceSafe database.

You can use the SourceSafe function only when working with Site Manager.

The Source Control instructions assume that you have the SourceSafe client software on your computer and have access rights to the SourceSafe database.

top


Connecting to Source Control

Connect to Source Control with your Username and Password. You must have an ID registered in SourceSafe program to transfer files to Source Control.

  1. First, check whether SourceSafe has been installed on your local hard drive. If not, you cannot select the menu to connect to Source Control.
  2. Select the [File > Site > Open Site...] menu command.
  3. In the Open dialog box, select the site you're going to work with and click Open.
  4. Select [Tools > Source Control > Connect Source Control Database...] in the main menu or select [Source Control > Connect Source Control Database...] in the Site Manager. To upload files to the SourceSafe server, the user ID should be registered with the SourceSafe server application.
  5. In the Source Control Login dialog box, enter the Username, Password, and Database and click OK.
  6. In the Select Source Control Project dialog box, select the path of a project, or create a new one, and click OK.

  7. Select the files to add in File List in Add Files to Source Control. At your first connection, it is advised to click the Select All button and register all the files.
  8. Enter a brief description of the files to be added in the Comment text box and click OK.

Once you have connected to Source Control, the information on this connection is recorded in the site file of Namo WebEditor (*.wej). This will provide you with automatic connection to Source Control upon subsequent connections.


Disconnecting from Source Control

  1. Select [Source Control > Disconnect] in the Site Manager window.
  2. The message "Use this Source Control in the future?" appears.
    • If you select 'Yes', you need not specify the path of the Source Control at the next connection to your source safe. The path of the Source Control is automatically designated upon the next connection.
    • If you select 'No', you should designate the path of your Source Control at the next connection.


Launching SourceSafe Explorer

Launch VSS Explorer from Namo WebEditor.

  1. Select [Tools > Source Control > Launch VSS Explorer] from the main menu or select [Source Control > Launch VSS Explorer] in the Site Manager.
  2. The SourceSafe application is launched.


Creating a new SourceSafe project

  1. Create a new Web site, or open an existing site.
  2. Switch to the Site Manager.
  3. In the Source Control menu, select Connect to Source Control. The Source Control Login dialog box will appear.
  4. Enter your SourceSafe user name and password.
  5. Click the Browse... button next to the Database text box, and then locate and select a SourceSafe database on your network server.
  6. Click OK to log in to the SourceSafe database. The Select Source Control Project dialog box will appear.
  7. Click New Project. The New Project dialog box will appear.
  8. In the Project name text box, enter a name for the new SourceSafe project. You do not need to use the same name as the Namo WebEditor site.
  9. In the Comment text box, optionally enter a brief description for the new project and click OK. The Add Files to Source Control dialog box will appear.
  10. The File list pane lists all the files in your current Web site. Select the files in the Web site that you want to add to the SourceSafe database. (Initially, all of the files are selected.) Optionally, type a comment in the Comment text box, and then click OK.


Getting the latest version of files

Get the latest version of the file from the Source Control to your computer. To use this function, you must have the connection to SourceSafe, and working folder to which SourceSafe files are copied must be specified.

  1. Add the collaborative files to Source Control.
  2. In the Site Manager, select the files to bring into your local folder.
  3. Select [Source Control > Get Latest Version...] in the menu.
  4. Click OK to continue.

To use Get Latest Version, you should connect to Source Control and set the working folder in your local hard drive, where the files from the SourceSafe are to be copied.


Checking files back in to Source Control

Once you've finished editing a file you'd checked out from Source Control, you must check it back in, thus storing your changes in the Source Control database and allowing others to modify the file.

  1. Select the [File > Site > Open Site...] menu command.
  2. In the Open dialog box, select the site you're going to work with and click Open.
  3. In the Site Manager, select the files you want to check in among the files with the check out mark ( [image]) in the Navigation Tree at the right side. You can display this Source Control status icon also in the Local file list by adding the Source Control status bar in the Customize Columns dialog box.
  4. Select the [Source Control > Check In...] menu command in the Site Manager window.
  5. In the Check In Files dialog box, select the files you want to check in. Optionally, you can enter a comment in the Comment text box describing the changes you've made to the files. Click OK. If you want to keep editing the files even after you've checked in, check Keep these files checked out in the Check Files In dialog box.


Checking files out of Source Control

To make changes to a document under Source Control, you must first check it out of the Source Control database. When you check a file out, a copy of the file is created on your hard drive (replacing any old copies) and your ID is shown in SourceSafe server to show who has checked the file out. A file that you have checked out cannot be checked out by anyone else at the same time, unless your SourceSafe administrator has allowed multiple check-outs. While a file is checked out, others can view the file but not modify it. You can check out one file, multiple files, or all the files in a SourceSafe project.

  1. Select the [File > Site > Open Site...] menu command.
  2. In the Open dialog box, select the site you're going to work with and click Open.
  3. Select the files you want to check out in the Site Manager.
  4. Select the [Source Control > Check Out...] menu command in the Site Manager window.
  5. Select the files you want to check out in the Check Out Files dialog box and click OK.
  6. You can check the status of the checked out files by locating the check out mark ( [image]) in the Navigation Tree at the right side. You can display this Source Control status icon also in the Local file list by adding the Source Control status bar in the Customize Columns dialog box.

Get Latest Version and Check Out... performs the same task of copying files from your SourceSafe server. The difference between the two is that Get Latest Version maintains the read-only property of the copied files while Check Out... does not. You can edit the files only after you check them out.


Undoing check out

The Undo Check Out command undoes your last check-out, canceling your changes both in the master copy in Source Control and in your local copy. The file or project remains the same as it was when you checked it out.

  1. Select [File > Site > Open Site...] from the menu.
  2. In the Open dialog box, select the project you're going to work with and click Open.
  3. In the Site Manager, select the files whose check-out should be undone from among the files with check out mark ( [image]) in the Navigation Tree at the right side. You can display this Source Control status icon also in the Local file list by adding the Source Control status bar in the Customize Columns dialog box.
  4. In the Site Manager, select [Source Control > Undo Check Out...] from the menu.
  5. In the Undo Checkout dialog box, confirm the files to undo check-out and click OK.


Adding/deleting files from Source Control

You can add project file(s) to, or delete from the Source Control.

  1. Select the [File >Site > Open Site...] menu command.
  2. In the Open dialog box, select the project you are going to work with and click Open.
  3. Connect to Source control by selecting [Source Control > Connect to Source Control Database...] in the Site Manager.
  4. Select the files to be added to, or deleted from, the file list of the Site Manager.
  5. Select the [Source Control > Add to Source Control.../Remove from Source Control...] menu command of the Site Manager window.
  6. In the Add Files to Source Control/Remove files from Source Control dialog box, select the files to add or remove from the File list and click OK.
  7. You can check which file has been added to/removed from the Source Control in the Site Manager by checking the Source Control icon in the Navigation Tree or in the Local file list. When added, the icon appears on the Navigation Tree. When deleted, the icon disappears from the Navigation Tree.
    By default, the Source Control status icons are displayed only in the Navigation Tree on the right side. You can display this Source Control status icons also in the Local file list by adding the Source Control status bar in the Customize Columns dialog box.


Source Control Login dialog box

[Site Manager > Source Control > Connect to Source Control Database...]

Allows you to login to the SourceSafe database with your user name and password.

  • User name
    Enter your SourceSafe user name.
  • Password
    Enter your SourceSafe password.
  • Database
    Select the SourceSafe database to open. Click Browse... to locate a database on a network server.


Add Files to Source Control dialog box

[Site Manager > Source Control > Add to Source Control...]

You can add selected files to Source Control.

  • File list
    Shows a list of files you have selected to add to the Source Control database.
  • Keep these files checked out
    Select this option if you want to check the selected files out immediately.
  • Comment
    Adds a comment typed into the text box.
  • Select All button
    Selects all the files in the file list.


Remove Files from Source Control dialog box

[Site Manager > Source Control > Remove from Source Control...]

This deletes the copies of the selected files in the SourceSafe database. The local copies are not affected. You should remove files from Source Control only if all users who work with those files are finished with the project and the files no longer need to be managed by SourceSafe.
  • File list
    Lists the files that you selected to remove from Source Control. To deselect a file, hold down <Ctrl> while clicking it.
  • Select All button
    Selects all the files in the file list.


Select Source Control Project dialog box

[Site Manager > Source Control > Connect to Source Control Database... > Source Control Login]

Select a folder (project) in the SourceSafe database into which the current WebEditor site should be added.
  • Project path
    Shows the path to the selected folder.
  • Folder list
    A hierarchical list box that shows the folders (projects) in your SourceSafe database. To select a folder, click it. To expand or collapse a folder, click the plus/minus sign next to the folder or double-click the folder.
  • New Project button
    Opens the New Project dialog box, where you can specify the information for a new SourceSafe project.


Check In Files dialog box

[Site Manager > Source Control > Check In...]

When you check files in, the files are copied back to the SourceSafe database, replacing the copies in the database, and are then made available for other users to check out.
  • File list
    Lists the files that you selected to check in. To deselect a file, hold down <Ctrl> while clicking it.
  • Keep these files checked out
    This option is not available when checking files in.
  • Comment
    Adds a comment typed into the text box.
  • Select All button
    Selects all the files in the file list.


Check Out Files dialog box

[Site Manager > Source Control > Check Out...]

When you check files out, the files are copied from the SourceSafe database to your local hard drive (replacing any old copies) so that you can edit them. While the files are checked out, other users can view the files, but cannot modify them.
  • File list
    Lists the files that you selected to check out. To deselect a file, hold down <Ctrl> while clicking it.
  • Comment
    Adds a comment typed into the text box.
  • Keep these files checked out
    (Leave this option selected.)
  • Select All button
    Selects all the files in the file list.


Undo Check Out dialog box

[Site Manager > Source Control > Undo Check Out...]

You can undo the check out operation, thereby allowing others to check out the selected files.

  • File list
    Shows a list of files you have selected to undo the check out.
  • Select All button
    Selects all the files in the file list.


New Project dialog box

[Site Manager > Source Control > Connect to Source Control Database... > Source Control Login > Select Source Control Project - New Project button]

You can create a new project in the SourceSafe database. When you add a Namo WebEditor project to your Microsoft SourceSafe database, you have to create a new SourceSafe project to store the Web project in.
  • Project name
    Enter a name for the new SourceSafe project. This does not have to be the same as the name of the Namo WebEditor project.
  • Comment
    Enter a description for the new project.


HTML window

In Namo WebEditor 5, you can edit Web documents either by using the WYSIWYG Edit window or manually inserting HTML sources in the HTML window. Press the <F6> key to move to the HTML window while you are editing.

When you switch from visual mode to HTML mode, Namo WebEditor places the cursor at the location in the source most closely corresponding to the position of the cursor in the Edit window. The same is true when going in the other direction.

Namo WebEditor provides automatic line breaks for long HTML sources and applies colors to HTML sources to increase readability.

You can also automatically insert HTML sources in the HTML window using the menu command and tool buttons. For example, you can use the toolbar to insert tables in the HTML window.

Automatic tag insertion in the HTML window

Certain HTML tags can be inserted in the HTML window using toolbar buttons and menu commands rather than typing them by hand.

The following items in the Insert menu are available:

  • Line Break submenu
  • Horizontal Line
  • Comment
  • Image
  • Image Element > Clip Art
  • Image Element > Background Image
  • Form Field submenu
  • Script > Body Script
  • Object > Java Applet
  • Object > Plug-In
  • Object > ActiveX Control
  • Hyperlink
  • Other > Date and Time
  • Other > Non-Breaking Space

In the Table menu, New Table is available.

The following buttons on the Standard Toolbar are available:

  • Insert Clip Art
  • Insert Image
  • Create Table
  • Hyperlink

The following buttons and menus on the Formatting Toolbar are available and operate on the current selection:

  • Font menu
  • Font Size menu
  • Bold
  • Italic
  • Underline

Editing the HTML source of a frameset

When you work on a frameset, the HTML tab displays the HTML source of the document in the active frame. To view or edit the source of the frameset document, use the Frameset Source tab.

top


What is HTML Clean Up?

When you import external HTML files made with Microsoft Office or Web documents made by someone else, it is likely that unnecessary tags will be included. Namo WebEditor 5 removes unnecessary and redundant tags automatically.

  • Removes tags that are generated when importing Microsoft Word files.
  • Removes empty tags and redundant tags.
  • Removes unnecessary closing tags such as '</p>'.
  • Changes indentation and line change rules.


What is HTML Verification?

Differences in HTML versions and Web browsers may cause improper interpretation of the HTML source. For example, the cancel tag '<s>' is not adequately interpreted in Netscape version 3.

Namo WebEditor verifies whether the Web document will be properly interpreted with certain versions of HTML protocol, and whether the Web document will be shown adequately in certain types of browsers.

Select the HTML versions from HTML 2.0, 3.0, and 4.0, and browser types from Internet Explorer and Netscape Navigator.


Inserting HTML tags

If you wish to insert a tag that Namo WebEditor does not support, you can edit manually in the HTML window or use the HTML Tag Attributes dialog box.

Select the [Insert > Other > HTML Tag...] menu command. In the HTML Tag Attributes dialog box, enter tag name and click New... to open the Attribute Name and Value dialog box where you can insert attributes in the tag.

Making the mouse-pointer change into a hand shape when you move the mouse over the text

  1. Insert text in the Edit window.
  2. Place the cursor before the text and select the [Insert > Other > HTML Tag...] menu command.
  3. Enter 'p' in the Tag name text box in the HTML Tag Attributes dialog box.
  4. Click New..., and enter 'style' and 'cursor:se-resize' in Name and Value, respectively and click OK.

  5. Click OK in the HTML Tag Attribute dialog box.
  6. Place the cursor after the text and select the [Insert > Other > HTML Tag...] menu command.
  7. Enter '/p' in the Tag name text box in the HTML Tag Attribute dialog box and click OK.
  8. Switch to the Preview tab to verify.

Place the mouse-pointer on this sentence. The shape of the pointer will change.

top


Using external source editing programs

You can use external source editing programs along with Namo WebEditor 5.

  1. Select the [Tools > Preferences...] menu command.
  2. Select the External Programs tab.
  3. Enter the name of the program in the Name text box, and enter the location of the execution file or click Browse... to browse. Notepad is registered as Program 1 by default.
  4. Click OK, and select the [Tools > External Programs > Notepad] menu command.
  5. The document you are editing currently will be opened in Notepad.
  6. Edit the document in Notepad and save after editing.
  7. When you activate the Edit window again you will be asked whether to reload the document.
  8. Click Yes to update the Edit window.


Cleaning up HTML sources

You can remove unnecessary tags using HTML Clean Up.

HTML Verification

Performs HTML verification without changing the layout of the source.

  1. Open a Web document.
  2. Select the HTML tab.
  3. Select Clean Up HTML... in the shortcut menu.
  4. In the Clean Up HTML dialog box, select Remove empty tags, Remove redundant tags and Integrate adjacent <font> tags when possible and deselect all others.
  5. Click OK.

Cleaning up Microsoft Word specific tags

  1. Open a Web document.
  2. Select the HTML tab.
  3. Select Clean Up HTML... in the shortcut menu.
  4. Select 'Remove MS-Word 2000 tags' and click OK.
  5. If you wish, select Remove specific tag and specify the tag you want to remove.

Selecting Remove optional closing tags will reduce the size of the Web document considerably.


HTML verification

Verify the compatibility of the HTML source of the Web document. The verification displays the result in the window (HTML tab) below the HTML window. The result window shows the line number where the error has occurred and description of the error. When an error or warning is found, click the item and the line with an error will be highlighted.

Verifying HTML compatibility

Verifies if the Web document is compatible with the selected HTML version.

  1. Open a Web document.
  2. In the HTML tab, and select {Verify HTML...} in the shortcut menu.

  3. Select the version of HTML. For example, if you want to verify if the document is compatible with HTML 2.0 and 3.2, select HTML 2.0 and HTML 3.2.
  4. Click OK and verification will perform.

Browser compatibility

Major browsers are made to comply with HTML protocols. But each browser has its specific tags that other browsers might not understand. Verify if the Web documents contain the specific tags that some browsers might not be able to interpret.

  1. Select Check for browser specific tags.
  2. Select one from the following:
    • Check for Internet Explorer specific tags to search for Internet Explorer specific tags.
    • Check for Netscape Navigator specific tags to search for Netscape Navigator specific tags.
  3. Click OK and verification will perform.

If you select only Check for browser specific tags but not Check for Internet Explorer specific tags and Check for Netscape specific tags, the verification will search for specific HTML tags that other browsers other than those two support. (e.g. Opera).

top


HTML Tag Attributes dialog box

[Insert > Other > HTML Tag...]

  • Tag name
    Insert a tag name. It may not be properly expressed in the Edit window or in Web browsers depending on how it is interpreted.
  • Add...
    Click to add an attribute to the tag in the Attribute Name and Value dialog box.
  • Modify...
    Click to modify the attribute name and value in the Attribute Name and Value dialog box.
  • Remove
    Click to remove the selected attribute from the list.

This function is useful when the new HTML Protocol includes new tags and/or attributes that are not supported by WebEditor yet.


Verify HTML dialog box

{HTML window shortcut menu - Verify HTML...}

HTML version

Select the HTML version for verification. The verification will generate errors/warnings if there are HTML sources that the selected version does not understand.

The most widely used HTML 4.0 protocol is 4.0 Loose + Frameset. 4.0 Strict DTD protocol is 4.0 Loose less deprecated tags and CSS tags.

Browser extension

  • Check for browser specific tags
    Checks if there are browser specific tags.
  • Check for Internet Explorer specific tags
    Checks if there are Internet Explorer specific tags.
  • Check for Netscape specific tags.
    Checks if there are Netscape specific tags.


Clean Up HTML dialog box

{HTML window shortcut menu - Clean Up HTML...}

  • Remove MS-Word 2000 tags
    Deletes the Microsoft word specific tags.
  • Remove empty tags
    Deletes tags that have no contents.

    Example: <i></i>
  • Remove redundantly nested tags
    Removes redundant tags.

    Example: <i>Namo <i>WebEditor</i></i> -> <i>Namo WebEditor</i>
  • Remove optional closing tags
    Removes tags that don't require closing tags. Selecting this option will reduce the document size considerably.

    Example: <p>Namo Interactive</p> -> <p>Namo Interactive
  • Integrate adjacent <font> tags when possible
    Integrates multiple <font> tags adjacent to each other into a single tag, if possible.

    Example: <font size="1"><font color="white">Deep Search</font></font> -> <font size="1" color="white">Deep Search</font>
  • Remove comment tags
    Removes comment tags. Comments that WebEditor uses for various functions will not be deleted.
  • Remove specific tags
    Select the check box and enter a specific tag or select one from the drop-down menu. Every case of the specific tag will be deleted.

    Example: If you select 'span', <span id="test"> will be deleted as well as <span>.
  • Wrap lines at
    Changes the line at the specified length.
  • Indent
    Specifies the indentation for the HTML source.

    Example: When '4' spaces is selected
    • <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr"> <title>WebEditor</title> <meta name="generator" content="Namo WebEditor v5.0"> </head> | <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr"> <title> WebEditor </title> <meta name="generator" content="Namo WebEditor v5.0"> </head>
Before change | After change
  • Allow line breaks inside tags
    Decide whether to allow line breaks inside tags. It is recommended not to, for it may cause errors.
  • Capitalize tag names
    Capitalizes the tag names.

    Example: <TABLE border="1">
  • Capitalize tag attribute names
    Capitalizes the name of attributes in the tags.

    Example: <table BORDER="1">

top


Launching an external program

[Tools > External Programs]
Launches an external program and opens the current document in it.

The [Tools > External Programs] submenu provides a quick way to open the current document in any of up to four external programs. The submenu is pre-configured to launch NotePad and Paint, but you can change these assignments and add two more in the External Programs tab of the Preferences dialog box.


i-mode Overview

What is i-mode?

i-mode is a mobile Internet access system developed by NTT DoCoMo. With an i-mode system, usually a mobile phone with i-mode compatibility, you can access online services, including sending and receiving e-mail, stock trading, online banking, viewing sports results, among other information. i-mode uses CHTML (Compact HTML) as its standard format, which is basically a subset of ordinary HTML. You can insert GIF images and Animated Gif images as well as texts in the i-mode documents. Moreover, there are special i-mode symbols such as love, kiss, telephone, and joy provided by Namo WebEditor. i-mode data is transmitted at the speed of 9600bps.


Creating a new i-mode document

[File > i-mode > New...] [ File > New > Resource Manager - i-mode]

You can create a new document for i-mode in the Component tab of the Resource Manager.

Creating a new document

Select an i-mode document in the selection box on the right. The description for each i-mode template will be displayed under Description below the selection box of the dialog box. There are four blank i-mode document types available;

  • Black and White/8 Full-Width Characters (i-mode 1)
  • Black and White/ 10 Full-Width Characters (i-mode 2)
  • Color/8 Full-Width Characters (i-mode 3)
  • Color/10 Full-Width Characters (i-mode 4)

Inserting a pre-designed i-mode template

Select a pre-designed i-mode template in the selection box while previewing each template. The description for each i-mode template will be displayed under Description below the selection box of the dialog box. There are five pre-designed i-mode templates available;

  • Symbolic list format with specified access keys (i-mode 5)
  • List format with specified access keys (i-mode 6)
  • Screen loading format (i-mode 7)
  • Phone call format (i-mode 8)
  • E-mail format (i-mode 9)


Preview window

[Preview tab]

Displays the preview of current CHTML document for i-mode. A cellular phone shaped image appears in the Preview window where you can preview the actual layout of the i-mode page in a cellular phone screen.

Buttons

You can use buttons of the cellular phone in the Preview window as follows.

  • Arrow buttons
    By clicking the buttons, you can scroll the page up/down or left/right on the cellular phone screen. You can also use the arrow keys on your keyboards.
  • Number buttons
     If you have linked an Access key to a number button, clicking the corresponding number button will display the URL of the linked i-mode page on the cellular phone screen.

To change the width of cellular phone screen, select the [File > i-mode > Change Screen Width...] menu command.


Create Hyperlink/Hyperlink Properties dialog

Create Hyperlink/Hyperlink Properties dialog box

[Insert > Hyperlink...], <F9>

You can create and edit hyperlinks, used to move to another i-mode page or to make a call.

New Features for i-mode

  • Access Key
    The Access Key function is offered, which enables you to assign numeric keys to a specific hyperlink. If you want to assign an Access Key to a hyperlink, enter the number directly in Access Key.

If you create a hyperlink to a numbered list or to a half-width number symbols, each number will work as a hyperlink Access Key.

To check whether the specified Access Key works properly, click the assigned number on the cell phone in the Preview window.

Working with hyperlinks for i-mode

tel: options has been added to Scheme. Select tel: from the Scheme drop-down menu and enter the phone number in the URL text box.


i-mode Wizard - Image Converter

[File > i-mode > Image Converter...]

  • File list
    Shows the list of all the image file in the current document. If you click a filename, its preview appears in the right window.
  • Dither Method
    Images in i-mode can have 2 colors (black and white) or less than 256 colors.
    Namo WebEditor supports the following dithering methods.
    • Original | bayer | bitonal
diffuse | halftone | color
  • Threshold
    Specifies the threshold of image color, which renders dithering more effectively.
  • Convert button
    Converts the files that are currently selected to a specified option.
  • Convert All button
    Converts all the files to a specified option.
  • Increase/Decrease slider
    Increases or decreases the size of the selected image file.
  • Resize Image
    You can resize the selected image by entering the width and height in pixels, in the Resize Image dialog box.


i-mode symbol dialog box

[File > i-mode > Insert i-mode Symbol...], [Insert > Other > i-mode Symbol...]

  • Category list
    Select the category containing an i-mode symbol to be inserted.
  • Symbol list
    Symbols, which belong to the selected category, are displayed in the right window. Click a symbol and its Code will appear below the Symbol list window. To insert a selected symbol, click Insert or double-click the symbol.
  • Code
    Displays the code of a current selected symbol in the decimal system.

You can edit an i-mode page while continuously opening and selecting the i-mode Symbol dialog box.


i-mode Wizard - CHTML Validator

[File > i-mode > CHTML validator...]

Displays and deletes the tags unsupportable in the specified CHTML version.

Unlike the ordinary HTML, CHTML can only make use of restricted tags and properties. Tags and properties which are not supported in i-mode are also not properly displayed in a Cellular phone. Downloading an i-mode page containing a lot of unsupportable tags and properties will cost a lot of time and money. Accordingly, it is essential to minimize the size of i-mode page by removing unnecessary and redundant tags and properties.

  • Tag list
    Displays the tags that are unsupportable in the specified CHTML version.
  • Remove All
     Removes all the tags and properties in the tag list.
  • Remove
     Removes the tags and properties in the tag list that are currently selected.


Screen Width dialog box

[File > i-mode > Screen Width...]

You can set the screen width of the current i-mode document to 8 full-width letters (96 pixel) or 10 letters (120 pixel).

  • 8 Letters
    Sets the screen width to 8 full-width letters (16 half-width characters).
  • 10 Letters
    Sets the screen width to 10 full-width letters (20 half-width characters)

The specified window size is applied both to the Edit window and the Preview window.


Open dialog box

[File > i-mode > Open...]

Opens a document saved in the local hard drive or on the Internet or converts HTML files to CHTML file format.

In case you have selected a document for i-mode (CHTML document)

The selected i-mode document is opened.

In case you have selected an HTML document

If you open a document whose file format is not for i-mode (CHTML), the i-mode Wizard appears.


i-mode Wizard - Convert Charter Width

i-mode Wizard - Convert Character Width

[File > i-mode > Convert Character Width...]

Convert to Half-Width Character

Converts the selected items to half-width character.

Target Characters

Select the item(s) of which you wish to convert to half-width character.

  • Symbols
    Converts full-width symbols to half-width symbols.

    e.g.
  • Numbers
    Converts full-width numbers to half-width numbers.

    e.g.
  • Spaces
    Converts full-width spaces to half-width spaces.

    e.g.
  • Letters
    Converts full-width alphabets to half-width alphabets.

    e.g.
  • Full-width Katakana (Katakana is a Japanese character set.)
    Converts full-width Katakana to half-width Katakana.

    e.g.


Troubleshooting

Below is a list of frequently asked questions (FAQs). To see the answer to a question, click the question.

Frequently asked questions

How do I add more fonts?

How do I type Asian characters in my documents?

I get a "This program has performed an illegal operation and will be shut down." error message, and Namo WebEditor shuts down. What should I do?

How do I make a link that jumps to a certain point in the document?

Can I delete a file that I uploaded to my Web site?

Can I edit a document on my Web site without having to download and reupload it?

How can I publish my site to other remote site than those ISPs offered by Namo WebEditor?

How can I make the background sound play repeatedly?

How do I suppress repetition of the background image?

How do I adjust line height?

How can I remove the underline from hyperlinks?

How do I change the color of hyperlinks when the mouse-pointer is over them?

Is it possible to make a document with zero margins?

How can I remove all the character formats? Some character formats remain even after I have applied the Clear Character Format (Ctrl + E) command.

Reducing the browser window makes the menu in the left frame disappear.

How can I display a linked document in a specific frame?

I need to change a large number of image paths in multiple documents. Is there a way to change them all at once?

How can I quickly check the image paths in a document?

I've inserted form fields in the table and the table gets longer than I specified in the Preview window.

How do I add those little yellow pop-up description boxes to my images?

How do I let people download files from my Web site?

How do I change my keyboard layout to a different language?

I've applied the "blinking" style to some text. Why doesn't it blink in the Preview window?

How do I fix the table size regardless of the different window size?

A red line trails the word I type.

How can I avoid creating back-up files (*.bak)?

How do I change the folder in which the Smart Buttons inserted in the document are saved?

Why doesn't "View with Netscape" or "View with Internet Explorer" work?

The changes I made in the current document are not shown when I preview the document in a Web browser using [View>View with Web Browser]. Why?

Why do Internet Explorer and Netscape display my documents differently?

Document tabs disappeared in the Edit window.

Why do I get a "file not found" error when I try to view my web site in a browser?

The images in my Web site show up fine when I edit or preview the documents in Namo WebEditor, but after publishing the site to my Web server, the images are missing when I view the documents in a browser. Why?

Grey area appears around the Edit window.

Why are lines of text in my document breaking in unexpected ways when I view the document in the Preview window?

Why is the Preview window empty?

Inserted tables/layers/images do not show in the Edit window.

top


How do I add more fonts?

Q: How do I add more fonts?

A: Install new fonts using the Fonts applet in Windows' control panel.

Namo WebEditor, like most other Windows applications, relies on the operating system to provide the fonts that the program uses. Thus, to add fonts for use in Namo WebEditor, you have to add the fonts in Windows. Follow the steps below.

  1. Select [Settings > Control Panel] in Windows' Start menu.
  2. In the Control Panel window, double-click the Fonts icon.
  3. In the Fonts window, select [File > Install New Font...].
  4. In the Add Fonts window, navigate to the folder containing the fonts to be installed. The fonts in the folder will be listed under List of fonts.
  5. Select the font(s) you want to install and click OK.
  6. To confirm that the fonts were installed successfully, switch back to Namo WebEditor and check the Font menu in the Formatting Toolbar.

Keep in mind that the fonts you use in your Web documents may not be installed on your site visitors' systems, especially for visitors who use non-Windows computers. If a visitor's system doesn't have a font that you use, the visitor's browser will substitute the default font.


How do I type Asian characters in my documents?

Q: How do I type Asian characters in my documents?

A: You need to install language support for the desired language to your Windows operating system.

In order to compose documents in a double-byte language such as Japanese, you need to install language support for the desired language to your Windows operating system. To do this, follow the instructions below for either Windows 98 or Windows 2000.

Installing language support and an input method editor (IME) in Windows 98

  1. Go to Microsoft's Global IME page using Internet Explorer 4.0 or higher (the site doesn't support Netscape).
  2. Click 'Search > Microsoft' on the top left.
  3. Click the 'Download Global IME'.
  4. At the step 1 of 2, select the language pack you want from the drop-down list and click Next.
  5. At the step 2 of 2, click Next.
  6. Download the selected components to your computer. The components will be installed automatically.

You should now be able to use the desired language in Namo WebEditor. Select the language from the language menu in Windows' task bar and starting typing. (For help with entering characters, click the ? icon in the input method editor palette.)

Installing a language group in Windows 2000

  1. Select [Settings > Control Panel] in Windows' Start menu.
  2. In the Control Panel window, double-click the Regional Options icon.
  3. In the General tab of the Regional Options dialog box, under Language settings for the system, select the check box next to the language group you want to install.
  4. Close the Regional Options dialog box. You will need your Windows 2000 CD-ROM to complete the installation.
  5. Once the language group has been installed, go back to the Control Panel and select Regional Options again.
  6. In the Regional Options dialog box, switch to the Input Locales tab and click Add.
  7. In the Add Input Locale dialog box, select the input locale and input method editor for the desired language.
  8. Click OK twice to close the dialog boxes.

You should now be able to use the desired language in Namo WebEditor. Select the language from the language menu in Windows' task bar and starting typing. (For help with entering characters, click the ? icon in the input method editor palette.)

top


I get a "This program has performed an illegal operation and will be shut down." error message, and Namo WebEditor shuts down. What should I do?

Q: I get a "This program has performed an illegal operation and will be shut down." error message, and Namo WebEditor shuts down. What should I do?

A: Contact technical support.

Since there are many possible reasons for an illegal operation error, please tell us about the circumstances in the error message appeared. Send an e-mail to weinfo@namo.co.kr with the following information:

  1. When you see an error message like the one above, click the Details button.
  2. Select the text in the detail box and copy it by pressing <Ctrl+C>.
  3. Open a new e-mail message and paste the text you copied into the message window by pressing <Ctrl+V>.
  4. Include in the e-mail message a description of exactly what you were doing when the error occurred.
  5. Include the version number of your copy of Namo WebEditor. You can find the exact version number by choosing About Namo WebEditor... in the Help menu and noting the version number in the title of the about box.
  6. Include the name and version number of your Windows operating system. For example, Windows 98 Second Edition.
  7. Include your Namo WebEditor serial number. This can also be found in the About Namo WebEditor window.
  8. Send the e-mail to weinfo@namo.co.kr. We can only respond to users that include their serial number in their e-mail.


How do I make a link that jumps to a certain point in the document?

Q: How do I make a link that jumps to a certain point in the document?

A: You can make a link that jumps to a certain point in the document by using a Bookmark.

A bookmark is a tag that identifies a location in a document as the possible target of a hyperlink. After creating a bookmark, you can then reference the bookmark in a hyperlink. When a site visitor uses the link, the browser will "jump" to the location of the bookmark in the target document. You can make a link that jumps to a certain point in the document by using a Bookmark.

Creating a bookmark

  1. Place the insertion point anywhere in the line that you want to bookmark. You can select a word in the line or the whole line if you wish, but this is optional.
  2. Select the [Insert > Bookmark...] menu command or press <Ctrl+G>.
  3. In the Bookmarks dialog box, enter a name for the bookmark in the Bookmark name text box. If you selected some text in step 1, that text will be used as the default name of the bookmark, but you can change it.
  4. Click Add. The bookmark's name will appear in the Bookmark list, which lists all the bookmarks in the document.
  5. Click Close to close the dialog box.

If you selected some text in step 1, the text will now have a dashed underline in the Edit window. (This underline is not visible in a browser.) If you didn't select any text, the bookmark will be invisible.

Referencing a bookmark in a hyperlink

  1. In the Create Hyperlink or Hyperlink Properties dialog box, enter the path or URL to the document containing the bookmark in the URL text box either by typing the URL yourself or clicking the Browse... button and specify the file in the Open dialog box. (If you are creating the hyperlink in the same document that contains the bookmark, just select the bookmark from the Bookmark drop-down list.)
  2. Enter the name of the bookmark in the Bookmark text box. (If the target document is on your local hard drive, you can select the bookmark name from the drop-down menu.)
  3. Click OK to close the dialog box.
  4. You can confirm that the hyperlink correctly jumps to the bookmark using the Preview window.

top


Can I delete a file that I uploaded to my Web site?

Q: Can I delete a file that I uploaded to my Web site?

A: You can delete a file on a remote site using the Site Manager.

To delete a file in your published Web site, follow the steps below.

  1. Open the Site Manager by pressing <F4>, or by selecting the [File > Publish > Publish... ] menu command.
  2. Select the remote site in the Remote drop-down menu on the right side and click Connect/Disconnect to Remote Site.
  3. Once connected, find the file you want to delete and select it. (To select multiple files, click each one while holding down the <Ctrl> key, or click the first file and Shift-click the last file.)
  4. Right-click the selected file(s) and select Delete in the shortcut menu. Click Yes when prompted to confirm the deletion.


Can I edit a document on my Web site without having to download and reupload it?

Q: Can I edit a document on my Web site without having to download and reupload it?

A: Yes. Use the Open URL button in the Open dialog box.

  1. Connect to the Internet, if you haven't already.
  2. Select [File > Open...] or type <Ctrl+O>.
  3. In the Open dialog box, type the URL of the document to open and click Open URL.
  4. Edit the document. When you're finished editing it, select [File > Save] or type <Ctrl+S>.
  5. To confirm your edits, load the document from your Web site in a browser.


How can I publish my site to other remote site than those ISPs offered by Namo WebEditor?

Q: How can I publish my site to other remote site than those ISPs offered by Namo WebEditor?

A: If you have the specific information on the FTP server to which you are going to publish your site, register the site to the Remote Sites dialog box by selecting the [File > Publish > Remote Site Settings...] menu command.

As you need an exact address to send an E-mail to someone, you need an exact information on the FTP server to which your site will be published to upload the files to the remote site.

  1. Run Namo WebEditor and select the [File > Publish > Remote Site Settings...] menu command.
  2. In the Remote Sites dialog box, click New....
  3. In the Remote Site Settings dialog box specify the following information. The site settings are different depending on which ISP or server you are using. If you want to know the specific information, ask your ISP for the details.

    4. Site name

    • Enter a name for the remote site. This name is only used to identify remote sites. Enter any name that represents the site. For example, enter just 'namo' for 'namo interactive'.

    FTP Information

    • Host
      Enter the address of the FTP server that is used to upload files to the Web site. Do not include "ftp://".
      Examples: ftp.namo.com
      210.101.143.254
    • Port
      Specify the port number to use when connecting to the FTP server. The default value, 21, should work in most cases.
    • Directory
      Enter the path of the directory on the FTP server that stores your Web documents. Usually, this is 'public_html'. If you're not sure what the HTML directory is, ask your network administrator or ISP.
    • User name
      Enter your login ID for the FTP server.
    • Password
      Enter your login password.
    • Passive
      Select this option if the server is behind a firewall or gateway requiring passive mode. If you're not sure, ask your network administrator or ISP.

    HTTP Information

    • URL
      Enter the URL used to access the Web site in a browser. This information is used by Namo WebEditor when you save a document directly to the site using the Save As command.
      Examples: http://www.mysite.com

    http://members.yourisp.com/~myname

  4. Click OK to close the Remote Site Settings dialog box. Check whether the new site has been added to the remote site list in the Remote Sites dialog box.
  5. Select the [File > Publish > Publish...] menu command or press <F4> to publish the site to the newly added remote site.

top


Q: How can I make the background sound play repeatedly?

A: You can specify the background sound in Document Properties dialog box to let the music keep playing as the Web page is loaded.

  1. Select the [File > Document Properties...] menu command or press <Ctrl + F2>.
  2. In the Document Properties dialog box, click the Styles tab.
  3. Specify the path of the background sound file in the Path text box under Background sound. Click Browse... and select the sound file in the Open dialog box and click Open. It is recommended to use the MIDI file which has a relatively smaller file size as a background sound.
  4. Specify how many times you want the background music to be played in Repeat. If you want the background music to keep playing, select Repeat forever.
  5. Click OK.
  6. Check whether the background music is playing properly in the Preview window.

The background sound specified at the Styles tab of the Document Properties dialog box is supported only in Internet Explorer. To play the background sound in Netscape, select the [Insert > Object > MIDI...] menu command and insert a MIDI file as a background sound by selecting a file in the Open dialog box.


How do I suppress repetition of the background image?

Q: How do I suppress repetition of the background image?

A: By default, a background image is repeated from left to right, top to bottom. To suppress this repetition of the background image, you should use a table or CSS styles.

To show the background image only in a specific portion of the document, take the following steps.

Using a background image large enough to cover more than the displayed area

Use this method when you are able to resize the image. You may well avoid this method if case the image file size is large, because it will take too long to load the background image in the Web browser.

  1. Create a background image using a graphic tool.
  2. Run Namo WebEditor and open a document and select the [File > Document Properties...] menu command.
  3. In the Appearance tab of the Document Properties dialog box, specify the background image by clicking the Browse... button and selecting the image file.
  4. Click Open to insert the image file.

Using a table

You can place a table at the appropriate position and insert a background image inside the table, not to the whole document. Because you can control the position of the image, it is recommended to use this method.

  1. Create a background image using a graphic tool.
  2. Run Namo WebEditor and open a document and select the [File > Document Properties...] menu command.
  3. Place the cursor at the position you want to insert a table and select the [Table > New Table...] menu command. In the Table tab of the Table Properties dialog box, set Rows and Columns to '1' and click OK. A '1x1' table is inserted in the Edit window.
  4. Place the cursor inside the table and select the [Table > Table Properties...] menu command.
  5. In the Table tab of the Table Properties dialog box, specify the background image in the Image text box by clicking the Browse... button and selecting the image file.
  6. Click OK. If you do not wish to show the table borders, set the Thickness to '0' or choose Hide from the Type drop-down menu under Borders at the Table tab of the Table Properties dialog box,.

Using CSS Styles

Internet Explorer and Netscape interpret CSS Styles differently, which can cause the discrepancy in displaying a Web page containing style elements.

  1. Open a document and select the [File > Document Properties...] menu command.
  2. In the Appearance tab of the Document Properties dialog box, specify the background image by clicking the Browse... button and selecting the image file.
  3. Click Open.
  4. Select the Styles tab and click the Insert Style in the <BODY> tag... button.
  5. In the Layout tab of the Style dialog box, select 'Don't repeat' from the Repeat drop-down menu. If you want to specify the vertical and horizontal position of the image, enter relevant values in the Vert. pos. and Horz. pos. text boxes.
  6. Click OK.

top


How do I adjust line height?

Q: How do I adjust line height?

A: Specify the line height amount in the Paragraph dialog box.

  1. Place the insertion point anywhere in the paragraph, or select the paragraphs, whose line height you want to adjust.
  2. Select the [Format > Paragraph...] menu command or type <Ctrl+T>.
  3. In the Paragraph Format dialog box, either select a common line height style in the Presets drop-down menu, or specify the exact line height in Line height. (If you specify the exact line height, be sure to select a unit in the drop-down menu. If you leave the unit unspecified, the line height value may be interpreted differently in different browsers.)
  4. Click OK to close the dialog box.

If you want to specify the line height for all the paragraphs in a document, including new paragraphs, you can attach a style to the <p> tag, which is used to define a paragraph in the HTML source.

  1. Select the [Format > Style Sheet...] menu command or type <Ctrl+F6>.
  2. In the Style Sheets dialog box, click the Add... button (the small document icon with a plus sign on top).
  3. In the Add Style dialog box, select p in the Tag drop-down menu and click OK.
  4. In the Style dialog box, switch to the Text tab and specify the line height in Line height.
  5. Click OK twice to close the dialog boxes.

If you want all your documents to use the same line height value, after following the steps above, export the style sheet using the Save as External File... button in the Style Sheets dialog box and then link to the external style sheet file in your other documents.

Line height amounts, which use the CSS <style> tag, are not interpreted exactly the same by different browsers. Your line height may look slightly different in Internet Explorer and Netscape.

top


How can I remove the underline from hyperlinks?

Q: How can I remove the underline from hyperlinks?

A: In the default setting, any text containing a hyperlink appears underlined. This may be removed using a CSS Style. You can remove underline from hyperlinks specifying the relevant style for hyperlinks in the Style Sheets dialog box.

  1. Select the [Format > Style Sheet...] menu command.
  2. Click Add... in the Style Sheet dialog box.
  3. In the Add Style dialog box, select 'Other' from the Style type radio buttons and ':link' from the Name drop-down menu and click OK.
  4. In the Font tab of the Style dialog box, set Decoration to 'None' and click OK.
  5. In the Add Style dialog box, take the same steps above for ':visited' and ':active' in the Style type.
  6. Check the result in the Preview window.

There are 4 hyperlink styles you can choose from 'Other' Style Type.

  • A: link - Unvisited hyperlinks.
  • A: visited - Visited hyperlinks.
  • A: active - A hyperlink state when a user is clicking the link.
  • A: hover - A hyperlink state when the mouse-pointer is placed over the link.


How do I change the color of hyperlinks when the mouse-pointer is over them?

Q: How do I change the color of hyperlinks when the mouse-pointer is over them?

A: You can change the color of hyperlinks when the mouse-pointer is over them by specifying the relevant style for hyperlinks in the Style Sheets dialog box.

  1. Select [Format > Style Sheet...] or type <Ctrl+F6>. The Style Sheets dialog box appears.
  2. Click the Add... icon.
  3. In the Add Style dialog box, select 'Other' from the Style type radio buttons and ':hover' from the Name drop-down menu and click OK.
  4. In the Style dialog box, click the Layout tab. Specify the Foreground color using the Color Picker Pop-up and click OK.
  5. Check the result in the Preview window.


Is it possible to make a document with zero margins?

Q: Is it possible to make a document with zero margins?

A: By default, most browsers put a small amount of blank space at the top and left edges of the window, so that the content of Web documents does not go right up against the window borders. However, you can set the page margins to zero in the Styles tab of Document Properties dialog box.

Removing the margins of Web documents

  1. Open a document whose margins you want to get rid of in the Edit window.
  2. Select the [File > Document Properties...] menu command.
  3. Click the Styles tab in the Document Properties dialog box. Set Left and Top to '0' under Margins.
  4. Click OK.

Removing the margins of frame documents

  1. Open a frameset document containing a frame document whose margins you want to remove in the Edit window.
  2. Place the cursor in the frame document whose margins you want to remove and select the [File > Document Properties...] menu command.
  3. Click the Styles tab in the Document Properties dialog box. Set Left and Top to '0' under Margins
  4. Click OK.
  5. If you want to remove the margins of other frame documents, repeat steps 1-4.

or,

  1. Open a frameset document containing a frame document whose margins you want to remove in the Edit window
  2. Place the cursor in the frame document whose margins you want to remove and select the [Frame > Frame Properties...] menu command.
  3. In the Frame Properties dialog box, set Left margin and Top margin to '0' under Size and Spacing.
  4. Click OK.
  5. If you want to remove the margins of other frame documents, repeat steps 1-4.

It is usual to create a document with no margins when you want to use the document in a pop-up window. In this way, you can remove unnecessary space in a pop-up window.

top


How can I remove all the character formats?

Q: How can I remove all the character formats? Some character formats remain even after I have applied the Clear Character Format (Ctrl + E) command.

A: In general, there are two ways to define character formats. One way is to use the general HTML tags, such as <font size>, <font face>, <color>, etc. The other way is to apply CSS styles to characters or paragraphs. Using the Clear Character Format (Ctrl + E) removes the character formats by removing only the usual HTML tags. Accordingly, to completely remove the character formats, you should remove the CSS styles applied to the characters also.

  1. Select the text whose properties should be removed.
  2. Select the [Format > Paragraph Style...] menu command.
  3. In the Style dialog box, click the Class tab.
  4. In the Class tab, press the Remove All Attributes button.
  5. Click OK to close the Style dialog box.


Reducing the browser window makes the menu in the left frame disappear.

Q: Reducing the browser window makes the menu in the left frame disappear.

A: You can resolve this problem by specifying the frame size in pixel.

Specifying the frame width or height in '%' lets the frame size change according to the browser window size. However, specifying the frame size in pixel keeps the frame size irrespective of the browser window size. This phenomenon applies also to tables and images. To fix the frame size, take the following steps.

  1. Place the cursor in the left frame of the two vertically split frames.
  2. Select the [Frame > Frame Properties...] menu command.
  3. In the Frame Properties dialog box, select 'pixels' in the Frame width drop-down menu. The width of current frame is automatically calculated as 'pixels' and inserted in the left text box.
  4. Click OK to close the Frame Properties dialog box.
  5. Place the cursor in the right frame of the two vertically split frames.
  6. Select the [Frame > Frame Properties...] menu command.
  7. Select '%' from the Frame width drop-down menu. The width of current frame is automatically calculated as '%' and inserted in the left text box.
  8. Click OK.

In case of a horizontally split frameset document, set the upper frame size as 'pixels' and lower frame size as '%'.


Q: How can I display a linked document in a specific frame?

A: You can display a document in a specific frame by specifying the target frame of the hyperlinks in a document.

A target frame refers to the frame in which the hyperlinked documents are displayed. To display linked documents in a specific frame, you should name each frame and specify Target frame in the Create Hyperlink dialog box.

  1. Place the cursor in the frame in which you want to display the hyperlinked documents and select the [Frame > Frame Properties...] menu command.
  2. In the Frame Properties dialog box, check whether the frame name appears in the Name dialog box. If not, type the frame name in the Name text box and click OK. (e. g. main, right, left, etc)
  3. Select text or image to which you want to create a hyperlink and select the [Insert > Hyperlink...] menu command.
  4. In the Create Hyperlink/Hyperlink Properties dialog box specify the target document either by typing the document's URL in URL or clicking Browse... and specifying the target document in the local hard drive.
  5. Specify the target frame by selecting a target frame name in the Target frame drop-down list or clicking [image] and selecting the target frame area you want.
  6. Click OK in the Target Frame dialog box.
  7. Save the frameset document and check the result in the Frameset Preview window.

The following is the default target frames available in the Frame Properties dialog box.

  • _blank: Shows the hyperlinked document or image in a new browser window.
  • _parent: Shows the hyperlinked document or image in the whole frameset, including the current frame.
  • _self: Shows the hyperlinked document or image in the current frame. If you specify Default target frames to '_self', the target documents of hyperlinks will be displayed in the same frame. '_self' is used as Default target frame by default.
  • _top: Shows the hyperlinked document or image in the whole browser window, replacing the current frameset.

top


I need to change a large number of image paths in multiple documents. Is there a way to change them all at once?

Q: I need to change a large number of image paths in multiple documents. Is there a way to change them all at once?

A: You can use the Global Find and Replace dialog box to make the same change to the image paths in many documents at once.

Global Find and replace is a powerful tool that lets you find and replace words or links in all the documents in a site or a folder in one step. For instance, if your Web site stored all image files in a folder called "images" at the top level of the site, and you now need to move them to a folder called "pictures", you can use global search and replace to change every instance of "images/" to "pictures/" in every document in the site.

To do a global find and replace, follow the steps below.

  1. Select the [Edit > Global Find and Replace...] menu command in the Edit window or in the Site Manager window.
  2. In the Global Find and Replace dialog box, enter the original string in the Find text box.
  3. Select the Replace with check box and enter the replacement string next to it.
  4. If you want to search in all the documents in a site and the site is open, select Find in site. The site folder will be automatically specified. If your documents are not stored in a site, or you only want to search the documents in one folder (and possibly its subfolders), select Find in folder and enter the folder path in the text box, or click Browse... and select the folder.
  5. If you selected Find in folder and you want to search in all the documents in every subfolder of the specified folder, select Include subfolders.
  6. Select Find in HTML documents only if you don't want to search in other types of text files, such as ASP or PHP files.
  7. Specify the search options by checking different check boxes under Options.
  8. Click Replace All. When the global find and replace has finished, a list of replacements will appear in the list box at the bottom of the dialog box.

top


How can I quickly check the image paths in a document?

Q: How can I quickly check the image paths in a document?

A: Use the Document Information dialog box.

  1. Open the document you want to check.
  2. Select the [File > Document Information...] menu command.
  3. In the Document Information dialog box, the image paths in the document are listed in the Resources list box, along with the image sizes.

If any image path is an absolute path to a location on your local drive, such as "C:\mysite\images\fish.jpg", you should change it to a relative path such as "images/fish.jpg" in order to avoid problems when you publish the document and images to your Web site. To change an image path, double-click the image in the Edit window and edit the contents of Image path in the Image Properties dialog box.


I've inserted form fields in the table and the table gets longer than I specified in the Preview window.

Q: I've inserted form fields in the table and the table gets longer than I specified in the Preview window.

A: You can keep a table from getting longer by moving the form tags out of the table or by using Javascripts.

When you insert form fields in a table and open the Preview window or select the [View > View with Internet Explorer] menu command, the table appears longer than you have specified. This is one of the Internet Explorer bugs. (You can see that there is nothing wrong with the table when you select the [View with Netscape] menu command.) To resolve this Internet Explorer bug, you can use the following two methods.

Moving the form tags out of the table (when the forms have the identical values)

  1. Place the cursor in the cell where a form filed has been inserted.
  2. Select the [Format > Form...] menu command.
  3. In the Form Properties dialog box, click Remove Form and click OK.
  4. Place the cursor in the same cell and select the [Table > Select > Table] menu command.
  5. When the table is selected, select [Format > Form...].
  6. In the Form Properties dialog box, enter a form name in the Form name text box (e.g. form1, form2, etc) and click OK.
  7. Check the result in the Preview window.

Using Javascripts (when the forms have different values)

  1. Open a document containing form fields embedded in a table and select the [Insert > Script > Document Script...] menu command.
  2. In the Document Script dialog box, insert the bold part of the following script and click OK.

    <!-- JavaScript
    function init()
    {
    if (document.all) {
    document.all.form1.style.marginBottom = 0;
    document.all.form2.style.marginBottom = 0;
    }
    }
    // - JavaScript - -->
  3. Place the cursor in the cell containing a form field and select the [Format > Form...] menu command.
  4. In the Form Properties dialog box, enter 'form1', which has been used in the above script, in the Form name text box and click OK.
  5. In the Action window, click Add....
  6. In the Action Properties dialog box, specify the following items.
    Event: OnLoad
    Action: Call JavaScript Function
    Function : init()
  7. Click OK.
  8. Check the result in the Preview window.

If there are multiple form fields(for example, 4 form fields), and the form names are 'form1', 'form2', 'form3', and 'form4', add the part of above scripts( 'document.all.form1.style.marginBottom = 0;') 4 times and modify the form names as below.

    document.all.form1.style.marginBottom =0; document.all.form2.style.marginBottom =0; document.all.form3.style.marginBottom = 0; document.all.form4.style.marginBottom = 0;

top


How do I add those little yellow pop-up description boxes to my images?

Q: How do I add those little yellow pop-up description boxes to my images?

A: Enter "alt text" in the Image Properties dialog box.

When viewing a Web site in a browser, if you hold the mouse pointer over an image, you may see a little yellow box with a brief description of the image pop up below the mouse pointer. Web browsers look for these brief descriptions in the alt (for "alternate") property of the <img> tag that specifies the image file. The "alt text" was originally intended to be displayed in place of an image by browsers that do not support images or that have images turned off, but modern browsers use the alt text even when the image is displayed.

You can add your own alt text descriptions to your images by following the steps below.

  1. Insert an image in the Edit window.
  2. Double-click the inserted image or click the image and select the [Format > Image Properties...] menu command.
  3. In the Image Properties dialog box, enter the description you want to display in the Alt text text box.
  4. Click OK.
  5. Check in the Preview window whether the yellow pop-up description box appears as you place the mouse-pointer over the image.


How do I let people download files from my Web site?

Q: How do I let people download files from my Web site?

A: Put hyperlinks to the files in your documents and upload the files to your Web site. Make sure that you publish the downloadable files to the Web server.

If you have some zip archives (.zip files), executable (.exe) files, or other kinds of binary files that cannot be viewed in a Web browser, and you want to share them with your site visitors, you need to do two things: (1) make links to the files in your Web documents and (2) upload the files to your Web site.

If you set hyperlinks to the files of which extension is HTML, GIF, JPG, TXT, etc, clicking the links displays the target file instantly in the browser instead of showing the File Download dialog box. This is because Web browsers support the direct display of the files with those file formats.

And even if a Web browser does not support a specific file format, installing a relevant plug-in lets you see the related file directly in the Web browser. For example, if you have installed Namo HWP viewer, clicking an image or text hyperlinked to a HWP file shows the document directly in the Web browser, instead of showing the File Download dialog box.

If you want site visitors to download files with HTML, GIF, JPG, TXT file formats, you should convert the files to those Web browsers cannot directly show. Converting their file formats to *.exe(executable file format) or *.zip(a compressed file format) is the most common way to get the task done.

To Make a link to a downloadable file, take the following steps.

  1. First, decide where in your Web site's home directory the downloadable file will be stored. Instead of storing downloadable files in the home directory itself, you may wish to store them in a subdirectory called "downloads" or something like that.
  2. Open the document that will contain the link to the downloadable file. Select the word(s) or image that will serve as the link, and press <F9> to open the Create Hyperlink/Hyperlink Properties dialog box.
  3. In the Create Hyperlink/Hyperlink Properties dialog box, type what will be the path to the downloadable file in the URL text box. For instance, if the name of the file is "games.zip" and you will store the file in a "downloads" folder in your home directory, the path would be "downloads/games.zip". If you will store the file in the home directory itself, the path would be just "games.zip".
  4. Click OK to close the dialog box.

For uploading downloadable files to your Web site, refer to Saving files to FTP server.

top


How do I change my keyboard layout to a different language?

Q: How do I change my keyboard layout to a different language?

A: Use the language menu in Windows' task bar.

The language menu in Windows' task bar is used to switch keyboard layouts, so that you can type special characters that are unique to a certain language. The language menu is represented by a small globe-shaped icon in the system tray, which is the area on the Windows' task bar to the right of the running applications buttons. The icon initially shows the two-letter abbreviation for the home language of your Windows installation, such as "En" for English. Click the icon to access the language menu, and select a language to switch the keyboard layout to the one for that language.

If you don't have a language menu in your task bar, or if the language you want doesn't appear in the menu, follow the steps below to add a keyboard layout.

Adding a keyboard layout for another language (Windows 98)

  1. Select [Settings > Control Panel] in Windows' Start menu.
  2. In the Control Panel window, double-click the Keyboard icon.
  3. In the Keyboard Properties dialog box, switch to the Language tab and click Add....
  4. In the Add Language dialog box, select the desired language.
  5. Click OK twice to close the dialog boxes.
  6. You should now see the language menu icon in Windows' task bar. Click the icon and select the desired language from the menu.

Adding a keyboard layout for another language (Windows 2000)

  1. Select [Settings > Control Panel] in Windows' Start menu.
  2. In the Control Panel window, double-click the Regional Options icon.
  3. In the Regional Options dialog box, switch to the Input Locales tab and click Add....
  4. In the Add Input Locale dialog box, select the desired language.
  5. Click OK twice to close the dialog boxes.
  6. You should now see the language menu icon in Windows' task bar. Click the icon and select the desired language from the menu.

You're now ready to start typing in the specified language in Namo WebEditor.

You can't use the Keyboard applet in the Windows 98 Control Panel to add an input method for a double-byte Asian language, such as Korean. To enable typing double-byte Asian characters in Namo WebEditor, you need to install language support for the desired language to your Windows operating system. For the detailed information, How to type Asian characters in the documents.

top


I've applied the "blinking" style to some text. Why doesn't it blink in the Preview window?

Q: I've applied the "blinking" style to some text. Why doesn't it blink in the Preview window?

A: The Preview window uses Internet Explorer's rendering engine. Blinking text is not supported by Internet Explorer, but by Netscape.

To confirm your blinking text, preview your document in Netscape. Select the [View > View with Netscape] menu command.


How do I fix the table size regardless of the different window size?

Q: How do I fix the table size regardless of the different window size?

A: When you create a new table in Namo WebEditor, its width is initially unspecified. That means the table can become wider or narrower as the browser window (or Namo WebEditor's Edit window) gets wider or narrower. To keep the table's width constant, you must specify its width in the Table Properties dialog box.

There are two ways to specify a table's width: in relative terms, as a percentage of the window width; and in absolute terms, using pixels. Percentage is useful when you want to maintain a constant ratio between the table width and the window width. But if you want to keep the table width constant even when the window width changes, specify the table width in pixels.

In fact, putting the entire contents of a Web document into a single-cell table with a fixed width is an effective way of making sure that the document's layout is always more or less the same, regardless of the different window sizes of your site visitor's browsers.

Fixing the table size in a document

  1. Place the cursor in the table whose size should be fixed.
  2. Select the [Table > Table Properties...] menu command.
  3. In the Table tab of the Table Properties dialog box, specify the Width and Height of the table in pixels. To specify the size in pixel, select the pixels radio button.
  4. Click OK.
  5. Check whether the table size changes in the Web browser as you change the browser window size. To see the document in a Web browser, select the [View > View with Internet Explorer] or [View > View with Netscape] menu command.

Fixing the entire document size using a table

  1. Create a '1x1' table, which will function as a document border.
  2. Place the cursor in the table and select the [Table > Table Properties...] menu command.
  3. In the Table tab of the Table Properties dialog box, specify the Width and Height of the table in pixels. To specify the size in pixel, select the pixels radio button.
  4. Specify Type to 'Hide' under Borders and click OK.
  5. Edit the document by inserting various elements in the table.
  6. Check whether the table size changes in the Web browser as you change the browser window size. To see the document in a Web browser, select the [View > View with Internet Explorer] or [View > View with Netscape] menu command.

In setting the size of a table, which will function as a document border, consider the resolution the site visitors are supposed to be using. '800 x 600' or '1024 x 768' are the most general resolution nowadays. Such being the case, it is advisable to set the table width to '800' pixels or below. If you set the table size to above '800' pixels, the site visitor with '800 x 600' resolution will have to use the horizontal scroll bar to see the entire page.

top


A red line trails the word I type.

Q: A red line trails the word I type.

A: You can remove the red line trailing the word you type by disabling Check spelling as you type at the Edit tab of Preferences dialog box.

Checking Check spelling as you type makes Namo WebEditor check the spelling of words instantly. Thus even incomplete words are sent instantly to the spelling checker of the Namo WebEditor, which makes a red line trail the words you type. Disabling the auto spell check by deselecting Check spelling as you type at the Edit tab of Preferences dialog box resolves this problem.

  1. Select the [Tools > Preferences...] menu command.
  2. Disable Check spelling as you type at the Edit tab of the Preferences dialog box.
  3. Click OK.

It is possible to activate the auto spell check and hide the red line indicating bad orthography. To do this, select both Check spelling as you type and Hide spelling errors option at the at the Edit tab of Preferences dialog box.

The Check spelling as you type function makes your editing very convenient but has its disadvantage of taking up much memory. Thus it is advisable not to use this function in a system with low memory.


How can I avoid creating back-up files (*.bak)?

Q: How can I avoid creating back-up files (*.bak)?

A: Back up files are created by default. Backup files can be used when you have deleted a necessary file by accident and want to recover it. But you can avoid creating backup files by disabling the Make backups option in the Save tab of Preferences dialog box.

  1. Select the [Tools > Preferences...] menu command.
  2. Disable the Make backups option in the Save tab of Preferences dialog box.
  3. Click OK to close the dialog box. Save a document and you can find the backup file of the document has not been created.


How do I change the folder in which the Smart Buttons inserted in the document are saved?

Q: How do I change the folder in which the Smart Buttons inserted in the document are saved?

A: You can change the folder name at the Save tab of the Preferences dialog box.

  1. Select the [Tools > Preferences...] menu command.
  2. Select the Save tab of Preferences dialog box.
  3. 'images\' is the default folder in which equation and chart images and Smart Buttons are saved. If you want to save the Smart Buttons in the folder named 'banner', type 'banner\' in Save Smart Button, equation, and chart images in text box.
  4. Click OK to close the dialog box.
  5. Insert a Smart Button and save the document. You can check that the inserted Smart Button has been saved in the folder 'banner.'


Why doesn't "View with Netscape" or "View with Internet Explorer" work?

Q: Why doesn't "View with Netscape" or "View with Internet Explorer" work?

A: You may have installed the browser using a path other than the default. You must change the browser path in Namo WebEditor's Preferences.

If you get the message, "The following program cannot be run. Please check the path of the program." when you use the View with Netscape or View with Internet Explorer command, it is probably because the browser was not installed at the default location. Namo WebEditor expects these browsers to have been installed at their default locations.

If this is not the case, you must let Namo WebEditor know where the browser is. Select the [Tools > Preferences...] menu command and change the browser path by specifying the relevant Program path for Browser 1 and Browser 2 at the Browsers tab of the Preferences dialog box.

Changing a browser path

To change a browser path, follow these steps:

  1. Open Namo WebEditor's Preferences dialog box (select Preferences... in the Tools menu). Click the Web Browsers tab.
  2. Under either Browser 1 or Browser 2, click Browse... and locate the desired browser's executable file (netscape.exe or iexplore.exe) using the Open dialog box. Double-click the executable to set the browser path.
  3. Click OK to close the Preferences dialog box. You should now be able to use the browser to preview your documents.
If you don't know where the browser's executable file is, you can search for it using Window's Find command.
  1. In Windows' Start menu, select [Find > Files or Folders...].
  2. In the text box labeled Named:, enter the name of the browser's executable file. For Netscape, this is netscape.exe. For Internet Explorer, this is iexplore.exe.
  3. In the text box labeled Look in:, type the drive letter (such as C:) of the drive you think the browser is installed on, or select a drive from the drop-down menu (click on the triangle at the right end of the text box). If you're not sure which drive the browser is installed on, select My Computer. Make sure the checkbox "Include subfolders" is checked.
  4. Click Find Now to begin the search. When Windows finds the executable file, it will appear in the list box at the bottom of the Find window. As soon as it appears, you can click Stop to stop the search.
  5. Note the directory that appears in the In Folder column, next to the name of the browser executable file. You can leave the Find window open to refer to it later.
  6. Switch back to Namo WebEditor and follow the directions under "Changing a browser path", above. When you click Browse... to locate the browser executable file, go to the folder indicated in the Find window.

top


The changes I made in the current document are not shown when I preview the document in a Web browser using [View>View with

Q: The changes I made in the current document are not shown when I preview the document in a Web browser using [View > View with Internet Explorer] or [View > View with Netscape]. Why?

A: Your browser is probably displaying a cached copy of the document. Press F5 to refresh the display.

When a Web browser downloads a document from the Internet, it stores a copy of the document in its cache on your hard drive. If you revisit the same document later in the same session, the browser loads the cached copy to save time. Unfortunately, browsers do the same thing even if the document exists on your hard drive in the first place.

To force the browser to display the most recent version of a document, press F5 or use the browser's refresh command.


Why do Internet Explorer and Netscape display my documents differently?

Q: Why do Internet Explorer and Netscape display my documents differently?

A: Unfortunately, there is no uniform standard by which browsers interpret and render HTML documents and other Web languages. Accordingly some elements are displayed differently in two browsers.

When HTML was invented, having documents look exactly the same in different browsers was not considered important. The Cascading Style Sheets (CSS) spec was developed partially in an attempt to help Web developers create documents that have a uniform appearance in different browsers, but not all browsers support all CSS tags, and they interpret CSS tags differently, just as with HTML.

There are three main problems that result in different browsers rendering documents differently:

  • An HTML document can be displayed differently in each browser.
    In case author used techniques without any fixed standard or inserted a background image into a table made up of multiple cells when creating a Web document, it is displayed differently in two Web browsers.

    Internet Explorer

    Netscape
  • The same tag is handled differently by different browsers.
    For example, the <layer> tag, which is used by Netscape to define a layer, is ignored by Internet Explorer. The <blink> tag is supported only by Netscape while CSS styles rendering different mouse-pointer shape is supported only by Internet Explorer. You can check the browser specific tags by selecting the [Tools > Clean up HTML Source > Verify HTML] menu command in the HTML window.
  • Browsers have their own bugs.
    Browsers often have bugs that can cause documents to be rendered incorrectly. For example, if you insert a form in a table, the table will be longer in Internet Explorer.
The best way to minimize the effect of browser inconsistencies is to design your pages flexibly. Try not to use design elements that depend on being rendered exactly the same in different browsers. Don't use tags that aren't supported by popular browsers.

top


Document tabs disappeared in the Edit window.

Q: Document tabs disappeared in the Edit window.

A: Namo WebEditor lets you show or hide various kinds of toolbars in accordance with your preferences in the Editing environment. Check whether the Document tabs item is checked by selecting the [View > Toolbars > Document Tabs] menu command.

If you cannot see the Document tabs, which displays the document names, as below, take the following steps.

  1. Select [View > Toolbars] in the menu.
  2. Check if the Document tabs item is checked. If not, select the [View > Toolbars > Document Tabs] menu command so that the document tabs may be displayed in the Edit window.


Why do I get a "file not found" error when I try to view my web site in a browser?

Q: Why do I get a "file not found" error when I try to view my web site in a browser?

A: Your site may not have a properly-named default document, or you may have uploaded your documents to the wrong directory on the Web server.

Even if you've successfully uploaded your site to a Web server, the site may appear to be empty when you try to see it in a browser--you might get an "HTTP 404--File Not Found" message or another message that says the same thing. This usually occurs for one of two reasons: either you don't have a properly-named default document, or you uploaded the documents to the wrong directory on the Web server.

Usual Reason #1: No properly-named default document

The default document of a Web site--commonly called the site's home page or index page--is the document you see when you enter just the base URL of a site in your browser's address bar--for instance, "http://members.namo.com/~johnb/". The base URL actually points to your site's home directory on the Web server, not to a document. When you don't specify a document name (such as "about_me.html") in the URL, the Web server tries to serve up the default document in the home directory. The name of the default document depends to some extent on the Web server software, but "index.htm" ("index.html") or "default.htm"("default.html") usually work. If there is no document with such a name in the home directory, the Web server displays the "HTTP 404--File Not Found" or a similar message.

Therefore, you must have a document in the home directory of your Web site that the Web server will recognize as the default document. If you used Namo WebEditor's Site Wizard to create your Web site, a document named "index.html" was automatically created in the base folder of the site (which corresponds to your home directory on the Web site). But if you didn't use the Site Wizard, you may have named the document that you intended as the home page of your site something that the Web server didn't recognize as a default document name--for instance, "home.html". If this is the case, you should rename the document "index.html". (First rename the copy on your hard drive, then upload the renamed file to the Web server.)

To check whether the lack of a properly-named index page is the problem, try entering the full URL to a document you know exists on your site into the address bar of your browser--for instance, "http://members.namo.com/~johnb/home.html". If the page loads, then this is indeed the problem. If, on the other hand, you still get a "file not found" error, then the problem may be that you uploaded your documents to the wrong directory on the server.

Another possibility, albeit a rare one, is that the software used by your Web server has been set not to look for a default document. If this is the case, entering your site's base URL into a Web browser will result in a "file not found" error, even if you have a properly-named default document and have uploaded your documents to the right directory. If you suspect this is the problem, contact your ISP or network administrator.

Usual Reason #2: Documents uploaded to the wrong server directory

Every Web site has a home directory on a Web server. The home directory is where the documents of the Web site are stored. In order to make your Web documents visible to your site visitors, you need to upload them to your home directory on the Web server. (This is called publishing your site.) However, it's not uncommon for inexperienced Web creators--and sometimes experienced ones--to upload their documents to the wrong directory. This can happen because you may not actually know where on the server your home directory is.

If your Web site is hosted by an ISP or a Web hosting provider, your home directory is probably named "public_html" and is probably located inside the directory that your ISP assigned as your personal directory (the one you see when you log in to your ISP's server using an FTP program without specifying any directory.) Try logging in to your Web server using an FTP client and seeing if there is a "public_html" or similarly-named directory in your personal directory. If there is, that's your home directory. If there is no such directory, ask your ISP where your home directory is.

If your Web site is hosted by a company server or your own server, your home directory could be anywhere. Ask your network administrator for help, or consult your Web server software documentation.

Once you've determined where your home directory is, enter its name in the Site Settings dialog box under FTP information, in the Directory text box. (To open the Site Settings dialog box, select the [File > Publish > Remote Site Settings...] and double-click your Web site entry in the remote site list at the left.Site List.) Then, re-upload your site to the Web server.

top


The images are missing when I view the documents in a browser.

Q: The images in my Web site show up fine when I edit or preview the documents in Namo WebEditor, but after publishing the site to my Web server, the images are missing when I view the documents in a browser. Why?

A: There can be several reasons causing this problem. It may be because you have not published necessary images to the Web server. Or maybe you have not specified the image path properly.

First check whether the necessary images have been published properly.

  1. Select the [File > Publish > Publish...] menu command or press <F4>.
  2. In the Site Manager - Remote window, select an ISP or a Web server to which you want to publish the site.
  3. Once connected to the Web server, the Remote window shows all the folders and files located in the remote site. If the remote site does not include the necessary image files, publish the files to the relevant location of the remote site.

If the images do not show even though the necessary images have been published, check the image paths of the documents.

  1. Run Namo WebEditor and open the document file, which does not show images properly in the Web browser.
  2. Double-click the inserted image, or click the image and select the [Format > Image Properties...] menu command.
  3. In the Image Properties dialog box, check the Image path. If the Image path has been specified as an absolute path, like 'C:\PROGRAM FILES\NAMO\WEBEDITOR 4\lib\ClipArt\Bars\Basic\bar1.gif', change the path into a relative path, like 'images\bar1.gif'. It is advisable to use alphabet and numbers only and to avoid using spaces or special characters because they can keep the image files from showing in Web browsers.

If the image path of the inserted images remain as an absolute path, it is advisable to get acquainted with the usage of Copy Resource Filess dialog box.

Relative path vs absolute path: Suppose you inserted apple.jpg in a document index.htm. Here you can designate the location of apple.jpg using an absolute path as "c:\homepage\images\apple.jpg". In this case, if you open index.htm using your Web browser, it will first look for a folder named "homepage", which is located under your local C drive. It then look for the folder "images" and finally opens the target file "apple.jpg". If you upload this folder structure upon your Web server, a serious problem can occur. That's because the drive C: is the hard drive in user's local disk, not a hard disk in your Web server. Using a relative link, which refers to a target document's location in relation to the document containing the link, can be a way to prevent this kind of problem.

top


Grey area appears around the Edit window

Q: Grey area appears around the Edit window.

A: Selecting the [View > Page Layout] menu command creates grey area the Edit window. You can remove the grey area by disabling the Page Layout mode.

Selecting the [View > Page Layout] menu command or pressing the shortcut key <Ctrl + Enter> creates grey area the Edit window as below. To remove this grey part, select the [View > Page Layout] menu command once again.


Why are lines of text in my document breaking in unexpected ways when I view the document in the Preview window?

Q: Why are lines of text in my document breaking in unexpected ways when I view the document in the Preview window?

A: You may be using paragraph or line breaks inappropriately.

If you press <Enter> (new paragraph) or <Shift+Enter> (new line) at the end of every line of text to start a new line, problems will result when your document is viewed in a browser whose window size is smaller than that of your Edit window, or when the browser uses a larger font and/or text size than the one you see in the Edit window. This is because all Web browsers "soft wrap" text, meaning that they automatically break a line of text when it reaches the right edge of the window. The problem is, if your "hard-wrapped" lines are longer in the browser that they were in the Edit window, the "soft" break caused by the browser will be followed a few characters or words later by your "hard" break, causing some lines to be too short.

While Namo WebEditor's Preview window is always the same size as the Edit window, it may display your text using a different font and/or text size than the Edit window. This is because the Preview window uses Internet Explorer's browser engine, which may be set to use a different default font and/or text size than the ones set in Namo WebEditor's preferences. Thus, line break problems are visible in the Preview window just as they would be in Internet Explorer.

Below are examples of the "right" way and the "wrong" way to enter text on a Web page. Think of each box as a browser window.

In the left box above, no manual line breaks were used, except for the one paragraph break. In the box on the right, a manual line break was inserted (by pressing <Shift+Enter>) at the end of every line. The two boxes look exactly the same.

Now see what happens when we increase the text size by one point, as in the examples below.

As you can see, the left box above still looks good, because we let the browser take care of putting "soft" line breaks wherever necessary. But in the box on the right, the text flows badly, due to our "hard" line breaks.

To avoid such undesirable flowing of text, avoid the use of manual line breaks whenever possible. Use paragraph breaks to end paragraphs, not lines. Use line breaks when there's a good reason to start a new line without starting a new paragraph, such as when you need to start a new line in a bulleted list without creating an additional list item.

top


Why is the Preview window empty?

Q: Why is the Preview window empty?

A: You may not have Internet Explorer 4.0 or newer installed on your computer.

Namo WebEditor depends on the Microsoft Internet Explorer ActiveX Control in order to provide preview capability inside the program. Therefore, Namo WebEditor requires Internet Explorer 4.0 or newer to be installed on your computer. If you do not have Internet Explorer 4.0 or newer, the Preview window will not work.

If you do not have Internet Explorer 4.0 or newer, you can download it for free from Microsoft's web site.


Inserted tables/layers/images do not show in the Edit window.

Q: Inserted tables/layers/images do not show in the Edit window.

A: In such cases, you can display tables, layers, or images by checking relevant Marks under the View menu.

When a table (or a layer) is invisible

  1. Select [View > Marks] in the menu.
  2. Select Table Gridlines or Layer Outlines.

When an image is invisible

  1. Select the [View > Images > View Images] menu command.

If you cannot see an image even after you have selected the [View > Images > View Images] menu command, the image itself is defective. You need to modify the image or image properties using a graphic tool.


Shortcut Keys by Menu

File Menu

Function | Key | Menu Path | Description
New | Ctrl + N | File > New... | Opens a new document.
Open | Ctrl + O | File > Open... | Opens a document in the hard drive or on the WWW.
Close | Ctrl + F4 | File > Close | Closes the current document.
Save | Ctrl + S | File > Save | Saves the document.
Save Site | Alt + Shift + S | File > Site > Save Site... | Saves the current site.
Save As | Ctrl + D | File > Save > Save As... | Saves the current document as another document.
Publish | F4 | File > Publish > Publish... | Transmits the local files to the remote server.
Print | Ctrl + P | File > Print... | Prints the document
Document Properties | Ctrl + F2 | File > Document Properties... | Shows the properties of the current document.
Document Information | Ctrl + F1 | File > Document Information... | Shows the detailed information about the current document.
Close | Ctrl + F4 | File > Close | Closes the document.
Exit program | Alt + F4 / Alt + X | File > Exit | Exits Namo WebEditor.

Edit Menu

Function | Key | Menu Path | Description
Select All | Ctrl + A | Edit > Select All | Selects all the elements in the Edit window.
Cut | Ctrl + X | Edit > Cut | Cuts the selected area.
Copy | Ctrl + C | Edit > Copy | Copies the selected area.
Append Selection to Clipboard and Delete | Ctrl + Shift + X |  | Cuts the selected area in addition to the previously cut elements.
Append Selection to Clipboard | Ctrl + Shift + C |  | Copies the selected area in addition to the previously copied elements.
Paste | Ctrl + V | Edit > Paste | Inserts the copied or cut elements.
Delete | Del | Edit > Delete | Deletes the selected area.
Undo | Ctrl + Z Alt + Backspace | Edit > Undo | Undoes the last task.
Redo | Alt + Z | Edit > Redo | Redoes the last task undone.
Find | Ctrl + F | Edit > Find... | Finds the specified word(s) or phrase(s) in the current document.
Replace | Ctrl + H | Edit > Replace... | Finds the specified word(s) or phrase(s) in the current document and replaces them with another word(s) or phrase(s) .
Find Again | F3 | Edit > Find Again | Repeats the last 'Find' task.
Copy Format | Shift + F2 | Edit > Copy Format... | Copies the character or paragraph formats as specified.
Paste Format | F2 | Edit > Paste Format | Applies the formats copied by the Copy Format command.
Global Find and Replace | Ctrl + Shift + F | Edit > Global Find and Replace | Finds the word(s) or phrase(s) in the current site or a specific folder and replaces them with another word(s) or phrase(s)

Additional Edit Menu

Function | Key | Menu Path | Description
Delete Next Item | Ctrl + Del |  | Deletes the word and space after the current cursor position.
Delete Previous Item | Ctrl + Back |  | Deletes the word and space before the current cursor position.
Delete Line | Ctrl + Y |  | Deletes the line where the cursor is located.
Move to Top of Document | Ctrl + Home |  | Moves the cursor to the document's beginning.
Move to End of Document | Ctrl + End |  | Moves the cursor to the document's end.
Move to Top of Window | Ctrl + Page Up |  | Moves the cursor to the first line of the window.
Move to Bottom of Window | Ctrl + Page Down |  | Moves the cursor to the last line of the window.
To the head of the previous word | Ctrl + ← |  | Moves the cursor to the head of the previous word.
To the head of the next word | Ctrl + → |  | Moves the cursor to the head of the next word.
Switch to next open document | Ctrl + Tab |  | Switches to the next document tab.
Switch to previous open document | Ctrl+ Shift +Tab Ctrl + Alt +Tab |  | Switches to the previous document tab.

View Menu

Function | Key | Menu Path | Description
Show/Hide Rulers | Alt + Shift + R | View > Rulers > Show All | Shows or hides Rulers in the Edit window.
View with Netscape (View with Browser 1) | F12 | View > View with Netscape | Displays the current document in Netscape (Browser 1).
View with Internet Explorer (View with Browser 2) | F11 | View > View with Internet Explorer | Displays the current document in Internet Explorer (Browser 2).
Auto Detect | F5 | View > Encoding > Auto Detect | Sets the document encoding automatically.
Redraw Screen | Shift + F5 | View > Redraw Screen | Redraws the screen by getting the latest information.
Enlarge/Reduce Screen | Ctrl+ Mouse Wheel Adjustment |  | Enlarges or reduces the Edit window.

Insert Menu

Function | Key | Menu Path | Description
Insert Line Break <br> | Shift + Enter | Insert > Line Break > Normal | Inserts a line break without making a new paragraph.
Symbol | Ctrl + F7 | Insert > Symbol... | Inserts symbols and special characters.
Insert Image | Ctrl+ Shift + I | Insert > Image... | Inserts images.
Insert Layer | Ctrl + Shift + A | Insert > Layer | Inserts a layer.
Resize Layer | Ctrl + Arrow keys | Layer resizing after selecting one | Enlarges/Reduces a layer by 1 pixel.
 | Ctrl + Shift + Arrow keys |  | Enlarges/Reduces a layer by 10 pixels.
Move Layer | Arrow keys | Moving layer after selecting one | Moves a layer by 1 pixel.
 | Shift + Arrow keys |  | Moves a layer by 10 pixels.
Script Wizard | Alt+ Shift + W | Insert > Script > Script Wizard... | Opens the Script Manager.
Create Hyperlink | F9 | Insert > Hyperlink... | Creates a Hyperlink.
Open Hyperlink | Alt + Mouse click |  | Opens a hyperlinked document in the Edit window.
Remove Hyperlink | Shift + F9 | Insert > Remove Hyperlink | Removes a hyperlink.
Bookmark | Ctrl + G | Insert > Bookmark | Inserts a bookmark at the specified location.
Assign Bookmark | Ctrl + K * |  | Assigns a bookmark
Jump to Bookmark | Ctrl + Q ** |  | Jumps to an assigned bookmark

* Press a number key from 0-9 or a letter key from A-Z after pressing Ctrl + K

** Press a number key from 0-9 or a letter key from A-Z after pressing Ctrl + Q to move to a previously assigned temporary bookmark, or press Ctrl + Q + P to move to the closest bookmark above the insertion point.

Format Menu

Function | Key | Menu Path | Description
Character Format | Ctrl + L | Format > Font... | Specifies the character formats.
Font Color | Ctrl + J |  | Applies the latest font color to the selected text.
Paragraph Format | Ctrl + T | Format > Paragraph... | Specifies the current paragraph formats.
Paragraph Style | Shift + F6 | Format > Paragraph Style... | Specifies the paragraph styles.
Style Sheets | Ctrl + F6 | Format > Style Sheet... | Specifies the document style sheets.
Page Break | Ctrl + Enter | Format > Page Break > Insert Page Break | Breaks pages for print.
Split List | Shift + F8 | Format > Split List | Splits a list.
Merge List | F8 | Format > Merge Lists | Merges separate lists.
Increase Indent | Ctrl + ] | Format > Increase Indent | Increases the indent of the paragraph.
Decrease Indent | Ctrl + [ | Format > Decrease Indent | Decreases the indent of the paragraph.
Clear Character Format | Ctrl + E |  | Clears all character formatting of the selected text.
View Attributes | Alt + Enter |  | Displays the attributes of the selected object

Table Menu

Function | Key | Menu Path | Description
Table Properties | Ctrl + Shift + T | Table > Table Properties... | Specifies the table properties.
Select Table | Alt + Shift + T | Table > Select > Table | Selects the table where the cursor is currently located.
Cell Properties | Ctrl + Shift + L | Table > Cell Properties... | Specifies the cell properties.
Delete Contents | Ctrl + Shift + Y | Table > Delete Contents | Deletes only the contents in the cell(s).
To the previous cell | Shift + Tab |  | Moves to the previous cell.
To the next cell | Tab |  | Moves to the next cell.
Merge Tables | Ctrl + F8 |  | Merges two separate tables.
Split Table | Shift + F8 |  | Splits a table into two tables.

Frame

Function | Key | Menu Path | Description
New Document in Frame | Ctrl + Shift + N | Frame > New Document in Frame | Opens a new document in the selected frame.
Frame Properties | Ctrl + Shift + R | Frame > Frame Properties | Specifies the properties of the current frame.
Save All Frames | Ctrl + Shift + S | Frame > Save All Frames... | Saves all the frames in the Edit window.
Print Frameset | Ctrl + Shift + P | Frame > Print Frameset... | Prints the selected frame.

Tools

Function | Key | Menu Path | Description
Check Spelling | F7 | Tools > Check Spelling... | Checks the spelling from the cursor position to the end of the document.
Auto Correct | Shift + F7 | Tools > Auto Correct... | Specifies the Auto Correct items and options.
Image Effects | Alt + Shift + I | Tools > Image Effects... | Applies various effects to images.
Start/Stop Key Macro Recording | Ctrl + Shift + M | Tools > Key Macro > Start Recording/ Stop Recording | Starts or Stops the Key Macro recording.
Play Macro | Ctrl + M | Tools > Key Macro > Play Macro | Plays the recorded Key Macro.
Key Macro Manager | Ctrl + Shift + 0 | Tools > Key Macro > Key Macro Manager | Manages the Key Macro feature.
Quick Insert | Ctrl + = * |  | Inserts a Quick Insert item.
Import from Internet Explorer | Shift + F12 |  | Imports the Web page in Internet Explorer into the Edit window.
Import from Netscape | Shift + F11 |  | Imports the Web page in Netscape into the Edit window.

* Inserting a Quick Insert item.- Enter a shortcut for a Quick Insert item and click < Ctrl + =>. The specified Quick Insert item is inserted in the Edit window.

Window

Function | Key | Menu Path | Description
Site Manager | Alt + 1 | Window > Site Manager | Opens the Site Manager.
Result window | Alt + 2 | Window > Result | Opens the Result window and shows the status of the links.
Document Outline | Alt + 3 | Window > Document Outline | Shows the document outline in the left gray window.
Timeline | Alt + 4 | Window > Timeline | Opens the Timeline window.
Layer List | Alt + 5 | Window > Layer List | Shows the list of layers in the current document.
Inspector | Alt + 6 | Window > Inspector | Opens the Inspector window.
Action | Alt + 7 | Window > Action | Opens the Action window.
Window List | Ctrl + W | Window > Window List... | Shows the number and list of documents in the Edit window.
HTML (F6) tab | F6 |  | Switches to the HTML tab.

Format

Function | Key | Menu Path | Description
Bold | Ctrl + B |  | Makes the selected text bolded.
Italic | Ctrl + I |  | Makes the selected text italicized.
Underline | Ctrl + U |  | Applies underlining to the selected text.
Normal | Ctrl + 0 |  | Specifies the paragraph style as normal.
Heading 1 | Ctrl + 1 |  | Specifies the paragraph style as Heading 1.
Heading 2 | Ctrl + 2 |  | Specifies the paragraph style as Heading 2.
Heading 3 | Ctrl + 3 |  | Specifies the paragraph style as Heading 3.
Heading 4 | Ctrl + 4 |  | Specifies the paragraph style as Heading 4.
Heading 5 | Ctrl + 5 |  | Specifies the paragraph style as Heading 5.
Heading 6 | Ctrl + 6 |  | Specifies the paragraph style as Heading 6.
Preformatted text style | Ctrl + 7 |  | Specifies the paragraph style to the preformatted text style.
Numbered List | Ctrl + 8 |  | Specifies the paragraph style as a numbered list.
Bulleted List | Ctrl + 9 |  | Specifies the paragraph style as a bulleted list.

Help

Function | Key | Menu Path | Description
Help | F1 | Help > Namo WebEditor Help | Opens the Help of Namo WebEditor.
Context Help | Shift + F1 |  | Turns the mouse-pointer to the '?'. Namo WebEditor gives the information of a certain element when you click it.

top


Getting technical support

Customer support, including technical support, for Namo WebEditor is generally provided by the master distributor of Namo Interactive's products in your country or region of the world. For a current list of master distributors, please visit our regional support contacts page on the Web at http://www.namo.com/company/contact/.

If your country or region is not listed, or if you purchased Namo WebEditor directly from Namo Interactive using our online store, please send an e-mail containing your question or problem or fax us at +82-2-55-99-334. Please use these contacts only if you purchased Namo WebEditor directly from Namo Interactive, or if your country is not listed on the regional support contacts page.

To be eligible to receive priority technical support from Namo Interactive, you must complete and send in the User Registration Form that came with your copy of Namo WebEditor, or register online at http://www.namo.com/support/register/.

Before contacting technical support, we suggest that you check the troubleshooting section of the Namo WebEditor online help. The troubleshooting section lists several frequently asked questions (FAQs) regarding technical issues. It's also a good idea to read the Namo WebEditor User's Guide thoroughly.

Thank you for purchasing and using Namo WebEditor. We hope you enjoy using it as much as we have enjoyed developing it.

Support links and contact info

  • Customer support
  • Online customer registration
  • Online troubleshooting guide
  • Technical support e-mail address
  • Technical support fax number: 952-930-9172

top


i-mode Wizard - Select CHTML Type

[File > i-mode > i-mode Wizard > Select CHTML Type...]

Please select CHTML Type

Select the CHTML type to be used for the i-mode document. There are two kinds of CHTML for i-mode: CHTML 1.0 and CHTML 2.0. CHTML 2.0 supports more various tags such as color, blink, and marquee.

  • i-mode
    Converts the current document to CHTML 1.0 for i-mode, which supports pages only in black and white.
  • i-mode - color
    Converts the current document to CHTML 2.0 for i-mode, which supports pages in color.
  • HTML
    Converts the current i-mode document to an HTML document.


Photo Album

[ Previous ][ Top ][Next]


Photo Album

[ Previous ][ Top ][ Next ]


Photo Album

[Previous][ Top ][ Next ]


Sound sample

A background music is applied to this document. Check with your audio facility whether the background music is properly being played.